diff --git a/spec/compilers/block_with_early_return b/spec/compilers/block_with_early_return
index 3cb3a250..d7e7963e 100644
--- a/spec/compilers/block_with_early_return
+++ b/spec/compilers/block_with_early_return
@@ -13,18 +13,18 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  patternVariable as H,
-  destructure as E,
-  newVariant as F,
-  pattern as G,
-  variant as B
+  patternVariable as E,
+  destructure as B,
+  newVariant as C,
+  pattern as D,
+  variant as A
 } from "./runtime.js";
 
 export const
-  A = B(1),
-  C = B(1),
-  D = () => {
-    const a = E(F(A)(`Some string...`), G(A, [H]));
+  F = A(1),
+  G = A(1),
+  H = () => {
+    const a = B(C(F)(`Some string...`), D(F, [E]));
     if (a === false) {
       return `RETURN`
     };
diff --git a/spec/compilers/block_with_early_return_await b/spec/compilers/block_with_early_return_await
index ab2071bf..ec9b3c33 100644
--- a/spec/compilers/block_with_early_return_await
+++ b/spec/compilers/block_with_early_return_await
@@ -17,19 +17,19 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  patternVariable as H,
-  destructure as E,
-  newVariant as F,
-  pattern as G,
-  variant as B
+  patternVariable as E,
+  destructure as B,
+  newVariant as C,
+  pattern as D,
+  variant as A
 } from "./runtime.js";
 
 export const
-  A = B(1),
-  C = B(1),
-  D = () => {
+  F = A(1),
+  G = A(1),
+  H = () => {
     (async () => {
-      const a = E(await F(A)(`Some string...`), G(A, [H]));
+      const a = B(await C(F)(`Some string...`), D(F, [E]));
       if (a === false) {
         return `RETURN`
       };
diff --git a/spec/compilers/bracket_access b/spec/compilers/bracket_access
index d128c83a..34abc696 100644
--- a/spec/compilers/bracket_access
+++ b/spec/compilers/bracket_access
@@ -20,24 +20,24 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  bracketAccess as E,
-  mapAccess as F,
-  variant as B
+  bracketAccess as B,
+  mapAccess as C,
+  variant as A
 } from "./runtime.js";
 
 export const
-  A = B(0),
-  C = B(1),
-  D = () => {
-    E([
+  D = A(0),
+  E = A(1),
+  F = () => {
+    B([
       `Hello`,
       `Blah`,
       `Joe`
-    ], 1, C, A);
-    E([], 1, C, A);
-    F([[
+    ], 1, E, D);
+    B([], 1, E, D);
+    C([[
       `key`,
       `value`
-    ]], `key`, C, A);
+    ]], `key`, E, D);
     return ``
   };
diff --git a/spec/compilers/builtin b/spec/compilers/builtin
index 4fd5d370..7d0963dc 100644
--- a/spec/compilers/builtin
+++ b/spec/compilers/builtin
@@ -7,11 +7,11 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as C,
-  decodeBoolean as B
+  createElement as B,
+  decodeBoolean as A
 } from "./runtime.js";
 
-export const A = () => {
-  (B);
-  return C(`div`, {})
+export const C = () => {
+  (A);
+  return B(`div`, {})
 };
diff --git a/spec/compilers/bundling b/spec/compilers/bundling
index 90f40da5..b4fc9b72 100644
--- a/spec/compilers/bundling
+++ b/spec/compilers/bundling
@@ -57,14 +57,14 @@ component Main {
 --------------------------------------------------------------------------------
 ---=== /__mint__/index.js ===---
 import {
-  lazyComponent as I,
-  createElement as G,
-  useEffect as E,
-  useSignal as D,
-  fragment as H,
-  variant as K,
-  load as F,
-  lazy as B
+  lazyComponent as G,
+  createElement as E,
+  useEffect as C,
+  useSignal as B,
+  fragment as F,
+  variant as H,
+  load as D,
+  lazy as A
 } from "./runtime.js";
 
 export const
@@ -72,31 +72,31 @@ export const
   b = (c) => {
     return `Hello ${c}!`
   },
-  A = B(`./2.js`),
-  C = () => {
-    const d = D(``);
-    E(() => {
+  I = A(`./2.js`),
+  J = () => {
+    const d = B(``);
+    C(() => {
       (async () => {
-        const e = await F(a);
+        const e = await D(a);
         return (() => {
           d.value = e
         })()
       })()
     }, []);
-    return G(H, {}, [
-      G(I, {
+    return E(F, {}, [
+      E(G, {
         c: [],
         key: `Greeter`,
         p: {
           a: `World`
         },
-        x: A
+        x: I
       }),
       b(`Me`)
     ])
   },
-  J = K(0),
-  L = K(0);
+  K = H(0),
+  L = H(0);
 
 ---=== /__mint__/1.js ===---
 export const a = `Hello, I was loaded later...`;
diff --git a/spec/compilers/case b/spec/compilers/case
index 1b4049e7..3e9c654f 100644
--- a/spec/compilers/case
+++ b/spec/compilers/case
@@ -10,10 +10,10 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { match as B } from "./runtime.js";
+import { match as A } from "./runtime.js";
 
-export const A = () => {
-  B(`Hello`, [
+export const B = () => {
+  A(`Hello`, [
     [
       `test`,
       () => {
diff --git a/spec/compilers/case_await b/spec/compilers/case_await
index db208de5..d74257f9 100644
--- a/spec/compilers/case_await
+++ b/spec/compilers/case_await
@@ -12,11 +12,11 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { match as B } from "./runtime.js";
+import { match as A } from "./runtime.js";
 
-export const A = () => {
+export const B = () => {
   (async () => {
-    return B(await `Hello`, [
+    return A(await `Hello`, [
       [
         `test`,
         () => {
diff --git a/spec/compilers/case_empty b/spec/compilers/case_empty
index c1812f1d..60a6a56a 100644
--- a/spec/compilers/case_empty
+++ b/spec/compilers/case_empty
@@ -6,10 +6,10 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { match as B } from "./runtime.js";
+import { match as A } from "./runtime.js";
 
-export const A = () => {
-  return B(`Hello`, [[
+export const B = () => {
+  return A(`Hello`, [[
     null,
     () => {
       return `false`
diff --git a/spec/compilers/case_with_array_destructuring b/spec/compilers/case_with_array_destructuring
index acd9f446..8f62d461 100644
--- a/spec/compilers/case_with_array_destructuring
+++ b/spec/compilers/case_with_array_destructuring
@@ -11,13 +11,13 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  patternVariable as C,
-  patternSpread as D,
-  match as B
+  patternVariable as B,
+  patternSpread as C,
+  match as A
 } from "./runtime.js";
 
-export const A = () => {
-  return B([], [
+export const D = () => {
+  return A([], [
     [
       [],
       () => {
@@ -31,15 +31,15 @@ export const A = () => {
       }
     ],
     [
-      [C],
+      [B],
       (a) => {
         return [a]
       }
     ],
     [
       [
-        C,
-        C
+        B,
+        B
       ],
       (b, c) => {
         return [
@@ -50,9 +50,9 @@ export const A = () => {
     ],
     [
       [
-        C,
-        C,
-        D
+        B,
+        B,
+        C
       ],
       (d, e, f) => {
         return f
diff --git a/spec/compilers/case_with_nested_tuple_destructuring b/spec/compilers/case_with_nested_tuple_destructuring
index 249c7d05..08b6af17 100644
--- a/spec/compilers/case_with_nested_tuple_destructuring
+++ b/spec/compilers/case_with_nested_tuple_destructuring
@@ -14,12 +14,12 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  patternVariable as C,
-  match as B
+  patternVariable as B,
+  match as A
 } from "./runtime.js";
 
-export const A = () => {
-  return B([
+export const C = () => {
+  return A([
     `A`,
     [
       `B`,
@@ -52,10 +52,10 @@ export const A = () => {
     ],
     [
       [
-        C,
+        B,
         [
-          C,
-          C
+          B,
+          B
         ]
       ],
       (a, b, c) => {
diff --git a/spec/compilers/case_with_tuple_destructuring b/spec/compilers/case_with_tuple_destructuring
index 273dd655..a1805e5c 100644
--- a/spec/compilers/case_with_tuple_destructuring
+++ b/spec/compilers/case_with_tuple_destructuring
@@ -14,12 +14,12 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  patternVariable as C,
-  match as B
+  patternVariable as B,
+  match as A
 } from "./runtime.js";
 
-export const A = () => {
-  return B([
+export const C = () => {
+  return A([
     `A`,
     0,
     true
@@ -46,9 +46,9 @@ export const A = () => {
     ],
     [
       [
-        C,
-        C,
-        C
+        B,
+        B,
+        B
       ],
       (a, b, c) => {
         return a
diff --git a/spec/compilers/case_with_tuple_destructuring_bool b/spec/compilers/case_with_tuple_destructuring_bool
index d466229b..33a123d5 100644
--- a/spec/compilers/case_with_tuple_destructuring_bool
+++ b/spec/compilers/case_with_tuple_destructuring_bool
@@ -12,10 +12,10 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { match as B } from "./runtime.js";
+import { match as A } from "./runtime.js";
 
-export const A = () => {
-  return B([
+export const B = () => {
+  return A([
     false,
     true
   ], [
diff --git a/spec/compilers/case_with_type_destructuring b/spec/compilers/case_with_type_destructuring
index 892c40be..5e558894 100644
--- a/spec/compilers/case_with_type_destructuring
+++ b/spec/compilers/case_with_type_destructuring
@@ -23,30 +23,30 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  patternVariable as I,
-  newVariant as G,
-  pattern as H,
-  variant as B,
-  match as F
+  patternVariable as E,
+  newVariant as C,
+  pattern as D,
+  variant as A,
+  match as B
 } from "./runtime.js";
 
 export const
-  A = B(1),
-  C = B(0),
-  D = B(1),
-  E = () => {
-    F(G(A)(G(D)(``)), [
+  F = A(1),
+  G = A(0),
+  H = A(1),
+  I = () => {
+    B(C(F)(C(H)(``)), [
       [
-        H(C, []),
+        D(G, []),
         () => {
           return ``
         }
       ],
       [
-        H(A, [I]),
+        D(F, [E]),
         (a) => {
-          return F(a, [[
-            H(D, [I]),
+          return B(a, [[
+            D(H, [E]),
             (b) => {
               return b
             }
diff --git a/spec/compilers/component_async b/spec/compilers/component_async
index db6c9ee8..cc904594 100644
--- a/spec/compilers/component_async
+++ b/spec/compilers/component_async
@@ -36,9 +36,9 @@ component Main {
 --------------------------------------------------------------------------------
 ---=== /__mint__/index.js ===---
 import {
-  lazyComponent as E,
-  createElement as D,
-  lazy as B
+  lazyComponent as C,
+  createElement as B,
+  lazy as A
 } from "./runtime.js";
 
 export const
@@ -48,34 +48,34 @@ export const
   b = () => {
     return `I'm in both!`
   },
-  A = B(`./1.js`),
-  C = () => {
-    return D(`div`, {}, [
+  D = A(`./1.js`),
+  E = () => {
+    return B(`div`, {}, [
       a(),
       b(),
-      D(E, {
+      B(C, {
         c: [],
         key: `Test`,
         p: {},
-        x: A
+        x: D
       })
     ])
   };
 
 ---=== /__mint__/1.js ===---
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-import { b as c } from "./index.js";
+import { b as a } from "./index.js";
 
 export const
-  a = (b) => {
-    return `I'm ${b}!`
+  b = (c) => {
+    return `I'm ${c}!`
   },
-  A = () => {
-    return B(`div`, {}, [
-      a(`async`),
-      c()
+  B = () => {
+    return A(`div`, {}, [
+      b(`async`),
+      a()
     ])
   };
 
-export default A;
+export default B;
diff --git a/spec/compilers/component_async_2 b/spec/compilers/component_async_2
index 036beee5..8810cd01 100644
--- a/spec/compilers/component_async_2
+++ b/spec/compilers/component_async_2
@@ -26,59 +26,59 @@ component Main {
 --------------------------------------------------------------------------------
 ---=== /__mint__/index.js ===---
 import {
-  lazyComponent as F,
-  createElement as E,
-  lazy as B
+  lazyComponent as C,
+  createElement as B,
+  lazy as A
 } from "./runtime.js";
 
 export const
-  A = B(`./1.js`),
-  C = B(`./2.js`),
-  D = () => {
-    return E(`div`, {}, [
-      E(F, {
+  D = A(`./1.js`),
+  E = A(`./2.js`),
+  F = () => {
+    return B(`div`, {}, [
+      B(C, {
         c: [],
         key: `First`,
         p: {},
-        x: A
+        x: D
       }),
-      E(F, {
+      B(C, {
         c: [],
         key: `Second`,
         p: {},
-        x: C
+        x: E
       })
     ])
   };
 
 ---=== /__mint__/1.js ===---
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
-  return B(`div`, {}, [`First`])
+export const B = () => {
+  return A(`div`, {}, [`First`])
 };
 
-export default A;
+export default B;
 
 ---=== /__mint__/2.js ===---
 import {
-  lazyComponent as E,
-  createElement as D,
-  lazy as B
+  lazyComponent as C,
+  createElement as B,
+  lazy as A
 } from "./runtime.js";
 
 export const
-  A = B(`./1.js`),
-  C = () => {
-    return D(`div`, {}, [
-      D(E, {
+  D = A(`./1.js`),
+  E = () => {
+    return B(`div`, {}, [
+      B(C, {
         c: [],
         key: `First`,
         p: {},
-        x: A
+        x: D
       }),
       `Second`
     ])
   };
 
-export default C;
+export default E;
diff --git a/spec/compilers/component_async_3 b/spec/compilers/component_async_3
index 05442c94..2474d7a9 100644
--- a/spec/compilers/component_async_3
+++ b/spec/compilers/component_async_3
@@ -38,9 +38,9 @@ component Main {
 --------------------------------------------------------------------------------
 ---=== /__mint__/index.js ===---
 import {
-  lazyComponent as F,
-  createElement as E,
-  lazy as B
+  lazyComponent as C,
+  createElement as B,
+  lazy as A
 } from "./runtime.js";
 
 export const
@@ -50,50 +50,50 @@ export const
   b = () => {
     return a()
   },
-  A = B(`./1.js`),
-  C = B(`./2.js`),
-  D = () => {
-    return E(`div`, {}, [
-      E(F, {
+  D = A(`./1.js`),
+  E = A(`./2.js`),
+  F = () => {
+    return B(`div`, {}, [
+      B(C, {
         c: [],
         key: `First`,
         p: {},
-        x: A
+        x: D
       }),
-      E(F, {
+      B(C, {
         c: [],
         key: `Second`,
         p: {},
-        x: C
+        x: E
       }),
       b()
     ])
   };
 
 ---=== /__mint__/1.js ===---
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
 import { b as a } from "./index.js";
 
-export const A = () => {
-  return B(`div`, {}, [
+export const B = () => {
+  return A(`div`, {}, [
     `First`,
     a()
   ])
 };
 
-export default A;
+export default B;
 
 ---=== /__mint__/2.js ===---
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
 import { b as a } from "./index.js";
 
-export const A = () => {
-  return B(`div`, {}, [
+export const B = () => {
+  return A(`div`, {}, [
     `Second`,
     a()
   ])
 };
 
-export default A;
+export default B;
diff --git a/spec/compilers/component_async_4 b/spec/compilers/component_async_4
index dd1e1213..ce626627 100644
--- a/spec/compilers/component_async_4
+++ b/spec/compilers/component_async_4
@@ -40,34 +40,34 @@ component Main {
 --------------------------------------------------------------------------------
 ---=== /__mint__/index.js ===---
 import {
-  lazyComponent as G,
-  createElement as B,
-  lazy as E
+  lazyComponent as C,
+  createElement as A,
+  lazy as B
 } from "./runtime.js";
 
 export const
-  A = ({
+  D = ({
     a = ``
   }) => {
-    return B(`div`, {}, [a])
+    return A(`div`, {}, [a])
   },
-  C = ({
+  E = ({
     b = 18
   }) => {
-    return B(`div`, {}, [`${b}px`])
+    return A(`div`, {}, [`${b}px`])
   },
-  D = E(`./1.js`),
-  F = () => {
-    return B(`div`, {}, [
-      B(A, {
+  F = B(`./1.js`),
+  G = () => {
+    return A(`div`, {}, [
+      A(D, {
         a: `blah`
       }),
-      B(C, {}),
-      B(G, {
+      A(E, {}),
+      A(C, {
         c: [],
         key: `Test`,
         p: {},
-        x: D
+        x: F
       })
     ])
   };
@@ -75,16 +75,16 @@ export const
 ---=== /__mint__/1.js ===---
 import { createElement as B } from "./runtime.js";
 
-import { C } from "./index.js";
+import { E as A } from "./index.js";
 
-export const A = ({
+export const C = ({
   a = ``,
   b = ``,
   c = ``
 }) => {
-  return B(C, {
+  return B(A, {
     b: 16
   })
 };
 
-export default A;
+export default C;
diff --git a/spec/compilers/component_async_5 b/spec/compilers/component_async_5
index 82c4d1ea..7e5274df 100644
--- a/spec/compilers/component_async_5
+++ b/spec/compilers/component_async_5
@@ -25,30 +25,30 @@ component Main {
 --------------------------------------------------------------------------------
 ---=== /__mint__/index.js ===---
 import {
-  lazyComponent as F,
-  createElement as E,
-  lazy as C
+  lazyComponent as C,
+  createElement as B,
+  lazy as A
 } from "./runtime.js";
 
 export const
-  A = ({
+  D = ({
     a = ``
   }) => {
     return a
   },
-  B = C(`./1.js`),
-  D = () => {
-    return E(`div`, {}, [
-      E(A, {
+  E = A(`./1.js`),
+  F = () => {
+    return B(`div`, {}, [
+      B(D, {
         a: `Blah`
       }),
-      E(F, {
+      B(C, {
         c: [],
         key: `Lesson`,
         p: {
           a: `Hello`
         },
-        x: B
+        x: E
       })
     ])
   };
diff --git a/spec/compilers/component_children b/spec/compilers/component_children
index 16460f25..a3b25a2a 100644
--- a/spec/compilers/component_children
+++ b/spec/compilers/component_children
@@ -13,16 +13,16 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as C,
-  toArray as D
+  createElement as A,
+  toArray as B
 } from "./runtime.js";
 
 export const
-  A = ({
+  C = ({
     children: a = []
   }) => {
     return a
   },
-  B = () => {
-    return C(A, {}, D(``))
+  D = () => {
+    return A(C, {}, B(``))
   };
diff --git a/spec/compilers/component_global b/spec/compilers/component_global
index e78a0b59..af872dda 100644
--- a/spec/compilers/component_global
+++ b/spec/compilers/component_global
@@ -25,21 +25,21 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as B,
-  signal as D
+  createElement as A,
+  signal as B
 } from "./runtime.js";
 
 export const
-  A = () => {
-    return B(`div`, {}, [a()])
+  C = () => {
+    return A(`div`, {}, [a()])
   },
   b = (c) => {
     return c
   },
-  C = () => {
-    return B(`div`, {}, [b(`Hello`)])
+  D = () => {
+    return A(`div`, {}, [b(`Hello`)])
   },
-  d = D(``),
+  d = B(``),
   a = () => {
     return d.value
   };
diff --git a/spec/compilers/component_instance_access b/spec/compilers/component_instance_access
index 71bc658c..5c6f7920 100644
--- a/spec/compilers/component_instance_access
+++ b/spec/compilers/component_instance_access
@@ -29,55 +29,55 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  patternVariable as K,
-  createElement as F,
-  pattern as J,
-  useMemo as E,
-  variant as B,
-  setRef as L,
-  useRef as H,
-  match as I
+  patternVariable as G,
+  createElement as C,
+  pattern as F,
+  useMemo as B,
+  variant as A,
+  setRef as H,
+  useRef as D,
+  match as E
 } from "./runtime.js";
 
 export const
-  A = B(1),
-  C = B(0),
-  D = ({
+  I = A(1),
+  J = A(0),
+  K = ({
     _
   }) => {
     const a = () => {
       return `Instance`
     };
-    const b = E(() => {
+    const b = B(() => {
       return {
         a
       }
     }, []);
     (_ ? _(b) : null);
-    return F(`div`, {})
+    return C(`div`, {})
   },
-  G = () => {
+  L = () => {
     const
-      c = H(new C()),
+      c = D(new J()),
       d = () => {
-        return I(c.current, [
+        return E(c.current, [
           [
-            J(A, [K]),
+            F(I, [G]),
             (e) => {
               return e.a()
             }
           ],
           [
-            J(C, []),
+            F(J, []),
             () => {
               return ``
             }
           ]
         ])
       };
-    return F(`div`, {
+    return C(`div`, {
       "onClick": d
-    }, [F(D, {
-      _: L(c, A)
+    }, [C(K, {
+      _: H(c, I)
     })])
   };
diff --git a/spec/compilers/component_instance_access_2 b/spec/compilers/component_instance_access_2
index ebd4f433..1b73c1bb 100644
--- a/spec/compilers/component_instance_access_2
+++ b/spec/compilers/component_instance_access_2
@@ -16,21 +16,21 @@ global component Global {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as E,
-  createRef as F,
-  variant as B,
-  setRef as H
+  createElement as B,
+  createRef as C,
+  variant as A,
+  setRef as D
 } from "./runtime.js";
 
 export const
-  A = B(1),
-  C = B(0),
-  D = () => {
-    return E(`div`, {})
-  },
-  a = F(new C()),
+  E = A(1),
+  F = A(0),
   G = () => {
-    return E(D, {
-      _: H(a, A)
+    return B(`div`, {})
+  },
+  a = C(new F()),
+  H = () => {
+    return B(G, {
+      _: D(a, E)
     })
   };
diff --git a/spec/compilers/component_instance_access_ref b/spec/compilers/component_instance_access_ref
index 187c0808..4b94c9f7 100644
--- a/spec/compilers/component_instance_access_ref
+++ b/spec/compilers/component_instance_access_ref
@@ -25,55 +25,55 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  patternVariable as L,
-  createElement as G,
-  pattern as K,
-  useMemo as F,
-  variant as B,
-  setRef as H,
-  useRef as E,
-  match as J
+  patternVariable as H,
+  createElement as D,
+  pattern as G,
+  useMemo as C,
+  variant as A,
+  setRef as E,
+  useRef as B,
+  match as F
 } from "./runtime.js";
 
 export const
-  A = B(1),
-  C = B(0),
-  D = ({
+  I = A(1),
+  J = A(0),
+  K = ({
     _
   }) => {
-    const a = E(new C());
-    const b = F(() => {
+    const a = B(new J());
+    const b = C(() => {
       return {
         a
       }
     }, []);
     (_ ? _(b) : null);
-    return G(`div`, {
-      ref: H(a, A)
+    return D(`div`, {
+      ref: E(a, I)
     })
   },
-  I = () => {
+  L = () => {
     const
-      c = E(new C()),
+      c = B(new J()),
       d = () => {
-        return J(c.current, [
+        return F(c.current, [
           [
-            K(A, [L]),
+            G(I, [H]),
             (e) => {
               return e.a.current
             }
           ],
           [
-            K(C, []),
+            G(J, []),
             () => {
-              return new C()
+              return new J()
             }
           ]
         ])
       };
-    return G(`div`, {
+    return D(`div`, {
       "onClick": d
-    }, [G(D, {
-      _: H(c, A)
+    }, [D(K, {
+      _: E(c, I)
     })])
   };
diff --git a/spec/compilers/component_namespaced b/spec/compilers/component_namespaced
index 450ad76d..cc9cd7c6 100644
--- a/spec/compilers/component_namespaced
+++ b/spec/compilers/component_namespaced
@@ -10,12 +10,12 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as C } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
 export const
-  A = () => {
+  B = () => {
     return `test`
   },
-  B = () => {
-    return C(A, {})
+  C = () => {
+    return A(B, {})
   };
diff --git a/spec/compilers/component_namespaced_with_style b/spec/compilers/component_namespaced_with_style
index 7c36f4e5..50d526f7 100644
--- a/spec/compilers/component_namespaced_with_style
+++ b/spec/compilers/component_namespaced_with_style
@@ -22,14 +22,14 @@ component Main {
 }
 
 ---=== /__mint__/index.js ===---
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
 export const
-  A = () => {
-    return B(`div`, {
+  B = () => {
+    return A(`div`, {
       className: `Ui·Dropdown_base`
     }, [`test`])
   },
   C = () => {
-    return B(A, {})
+    return A(B, {})
   };
diff --git a/spec/compilers/component_readonly b/spec/compilers/component_readonly
index 536a5716..7a37dfdd 100644
--- a/spec/compilers/component_readonly
+++ b/spec/compilers/component_readonly
@@ -12,16 +12,16 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
 export const
-  A = ({
+  B = ({
     a = false
   }) => {
-    return B(`div`, {})
+    return A(`div`, {})
   },
   C = () => {
-    return B(A, {
+    return A(B, {
       a: true
     })
   };
diff --git a/spec/compilers/component_with_provider b/spec/compilers/component_with_provider
index d3c75e11..933ebfe7 100644
--- a/spec/compilers/component_with_provider
+++ b/spec/compilers/component_with_provider
@@ -23,19 +23,19 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createProvider as B,
-  createElement as E,
-  useId as D
+  createProvider as A,
+  createElement as C,
+  useId as B
 } from "./runtime.js";
 
 export const
   a = new Map(),
-  A = B(a, () => {
+  D = A(a, () => {
     return null
   }),
-  C = () => {
-    const b = D();
-    A(b, () => {
+  E = () => {
+    const b = B();
+    D(b, () => {
       return (false ? {
         moves: (c) => {
           return null
@@ -45,6 +45,5 @@ export const
         }
       } : null)
     });
-    return E(`div`, {})
+    return C(`div`, {})
   };
-
diff --git a/spec/compilers/component_with_provider_and_lifecycle_functions b/spec/compilers/component_with_provider_and_lifecycle_functions
index 78184033..a2d5d2ae 100644
--- a/spec/compilers/component_with_provider_and_lifecycle_functions
+++ b/spec/compilers/component_with_provider_and_lifecycle_functions
@@ -35,21 +35,21 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createProvider as B,
-  createElement as G,
-  useDidUpdate as F,
-  useEffect as E,
-  useId as D
+  createProvider as A,
+  createElement as E,
+  useDidUpdate as D,
+  useEffect as C,
+  useId as B
 } from "./runtime.js";
 
 export const
   a = new Map(),
-  A = B(a, () => {
+  F = A(a, () => {
     return null
   }),
-  C = () => {
-    const b = D();
-    E(() => {
+  G = () => {
+    const b = B();
+    C(() => {
       (() => {
         return null
       })();
@@ -57,10 +57,10 @@ export const
         return null
       }
     }, []);
-    F(() => {
+    D(() => {
       return null
     });
-    A(b, () => {
+    F(b, () => {
       return (false ? {
         moves: (c) => {
           return null
@@ -70,5 +70,5 @@ export const
         }
       } : null)
     });
-    return G(`div`, {})
+    return E(`div`, {})
   };
diff --git a/spec/compilers/component_with_provider_and_store b/spec/compilers/component_with_provider_and_store
index c005a0be..cd7228b8 100644
--- a/spec/compilers/component_with_provider_and_store
+++ b/spec/compilers/component_with_provider_and_store
@@ -33,10 +33,10 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createProvider as C,
-  createElement as F,
+  createProvider as B,
+  createElement as D,
   signal as A,
-  useId as E
+  useId as C
 } from "./runtime.js";
 
 export const
@@ -45,12 +45,12 @@ export const
   },
   b = A(``),
   c = new Map(),
-  B = C(c, () => {
+  E = B(c, () => {
     return null
   }),
-  D = () => {
-    const d = E();
-    B(d, () => {
+  F = () => {
+    const d = C();
+    E(d, () => {
       return (false ? {
         moves: (e) => {
           return null
@@ -60,5 +60,5 @@ export const
         }
       } : null)
     });
-    return F(`div`, {})
+    return D(`div`, {})
   };
diff --git a/spec/compilers/constant_component b/spec/compilers/constant_component
index 2d5eaa6d..d8f0051a 100644
--- a/spec/compilers/constant_component
+++ b/spec/compilers/constant_component
@@ -6,9 +6,9 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { useSignal as B } from "./runtime.js";
+import { useSignal as A } from "./runtime.js";
 
-export const A = () => {
-  const a = B(`ASD`);
+export const B = () => {
+  const a = A(`ASD`);
   return a.value
 };
diff --git a/spec/compilers/constant_global_component b/spec/compilers/constant_global_component
index 2f286b54..c3e6842e 100644
--- a/spec/compilers/constant_global_component
+++ b/spec/compilers/constant_global_component
@@ -14,13 +14,13 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as C } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
 export const
-  A = () => {
+  B = () => {
     return a
   },
   a = `ASD`,
-  B = () => {
-    return C(`div`, {}, [a])
+  C = () => {
+    return A(`div`, {}, [a])
   };
diff --git a/spec/compilers/constant_module b/spec/compilers/constant_module
index 2957d19d..26a26ede 100644
--- a/spec/compilers/constant_module
+++ b/spec/compilers/constant_module
@@ -10,11 +10,10 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
 export const
   a = `ASD`,
-  A = () => {
-    return B(`div`, {}, [a])
+  B = () => {
+    return A(`div`, {}, [a])
   };
-
diff --git a/spec/compilers/constant_store b/spec/compilers/constant_store
index c0dcfedc..edade58c 100644
--- a/spec/compilers/constant_store
+++ b/spec/compilers/constant_store
@@ -10,11 +10,10 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
 export const
   a = `ASD`,
-  A = () => {
-    return B(`div`, {}, [a])
+  B = () => {
+    return A(`div`, {}, [a])
   };
-
diff --git a/spec/compilers/constant_store_exposed b/spec/compilers/constant_store_exposed
index 983dbdde..ccbf4fe9 100644
--- a/spec/compilers/constant_store_exposed
+++ b/spec/compilers/constant_store_exposed
@@ -12,10 +12,10 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
 export const
   a = `ASD`,
-  A = () => {
-    return B(`div`, {}, [a])
+  B = () => {
+    return A(`div`, {}, [a])
   };
diff --git a/spec/compilers/css_definition b/spec/compilers/css_definition
index bd72fb6b..69e16445 100644
--- a/spec/compilers/css_definition
+++ b/spec/compilers/css_definition
@@ -19,11 +19,11 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as B,
-  style as C
+  createElement as A,
+  style as B
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   const
     a = () => {
       return 10
@@ -34,8 +34,8 @@ export const A = () => {
       };
       return _
     };
-  return B(`div`, {
+  return A(`div`, {
     className: `Main_test`,
-    style: C([b()])
+    style: B([b()])
   })
 };
diff --git a/spec/compilers/css_font_face b/spec/compilers/css_font_face
index 0d40aa33..efd7272a 100644
--- a/spec/compilers/css_font_face
+++ b/spec/compilers/css_font_face
@@ -30,10 +30,10 @@ component Main {
 }
 
 ---=== /__mint__/index.js ===---
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
-  return B(`div`, {
+export const B = () => {
+  return A(`div`, {
     className: `Main_test`
   })
 };
diff --git a/spec/compilers/css_font_face_with_quotes b/spec/compilers/css_font_face_with_quotes
index 379a6046..43fc81f9 100644
--- a/spec/compilers/css_font_face_with_quotes
+++ b/spec/compilers/css_font_face_with_quotes
@@ -24,10 +24,10 @@ component Main {
 }
 
 ---=== /__mint__/index.js ===---
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
-  return B(`div`, {
+export const B = () => {
+  return A(`div`, {
     className: `Main_test`
   })
 };
diff --git a/spec/compilers/css_keyframes b/spec/compilers/css_keyframes
index eb807256..f523404c 100644
--- a/spec/compilers/css_keyframes
+++ b/spec/compilers/css_keyframes
@@ -51,22 +51,22 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as C,
-  useSignal as B,
-  style as D
+  createElement as B,
+  useSignal as A,
+  style as C
 } from "./runtime.js";
 
-export const A = () => {
+export const D = () => {
   const
-    a = B(1),
+    a = A(1),
     b = () => {
       const _ = {
         [`--a-a`]: a.value
       };
       return _
     };
-  return C(`div`, {
+  return B(`div`, {
     className: `Main_test`,
-    style: D([b()])
+    style: C([b()])
   })
 };
diff --git a/spec/compilers/css_media b/spec/compilers/css_media
index 105687c2..f4bd748e 100644
--- a/spec/compilers/css_media
+++ b/spec/compilers/css_media
@@ -31,11 +31,11 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as B,
-  style as C
+  createElement as A,
+  style as B
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   const
     a = () => {
       return `blue`
@@ -47,8 +47,8 @@ export const A = () => {
       };
       return _
     };
-  return B(`div`, {
+  return A(`div`, {
     className: `Main_test`,
-    style: C([b()])
+    style: B([b()])
   })
 };
diff --git a/spec/compilers/css_media_with_if b/spec/compilers/css_media_with_if
index a309f821..43fd01f7 100644
--- a/spec/compilers/css_media_with_if
+++ b/spec/compilers/css_media_with_if
@@ -27,11 +27,11 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as B,
-  style as C
+  createElement as A,
+  style as B
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   const a = () => {
     const _ = {};
     (true ? Object.assign(_, {
@@ -39,8 +39,8 @@ export const A = () => {
     }) : null);
     return _
   };
-  return B(`div`, {
+  return A(`div`, {
     className: `Main_test`,
-    style: C([a()])
+    style: B([a()])
   })
 };
diff --git a/spec/compilers/css_selector b/spec/compilers/css_selector
index cb4e1cd3..f93a6f9c 100644
--- a/spec/compilers/css_selector
+++ b/spec/compilers/css_selector
@@ -29,11 +29,11 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as B,
-  style as C
+  createElement as A,
+  style as B
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   const
     a = () => {
       return `blue`
@@ -44,8 +44,8 @@ export const A = () => {
       };
       return _
     };
-  return B(`div`, {
+  return A(`div`, {
     className: `Main_test`,
-    style: C([b()])
+    style: B([b()])
   })
 };
diff --git a/spec/compilers/css_selector_multiple b/spec/compilers/css_selector_multiple
index c56eeb3e..822d8126 100644
--- a/spec/compilers/css_selector_multiple
+++ b/spec/compilers/css_selector_multiple
@@ -34,11 +34,11 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as B,
-  style as C
+  createElement as A,
+  style as B
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   const
     a = () => {
       return `blue`
@@ -49,8 +49,8 @@ export const A = () => {
       };
       return _
     };
-  return B(`div`, {
+  return A(`div`, {
     className: `Main_test`,
-    style: C([b()])
+    style: B([b()])
   })
 };
diff --git a/spec/compilers/css_string b/spec/compilers/css_string
index 18848fa9..3ccce933 100644
--- a/spec/compilers/css_string
+++ b/spec/compilers/css_string
@@ -21,22 +21,22 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as C,
-  useSignal as B,
-  style as D
+  createElement as B,
+  useSignal as A,
+  style as C
 } from "./runtime.js";
 
-export const A = () => {
+export const D = () => {
   const
-    a = B(`Joe`),
+    a = A(`Joe`),
     b = () => {
       const _ = {
         [`--a-a`]: `"Hi"` + ` blah ` + a.value + ` ` + `"Here is some content; Thanks ${a.value}"`
       };
       return _
     };
-  return C(`div`, {
+  return B(`div`, {
     className: `Main_unicode`,
-    style: D([b()])
-  }, [C(`span`, {})])
+    style: C([b()])
+  }, [B(`span`, {})])
 };
diff --git a/spec/compilers/css_supports b/spec/compilers/css_supports
index 18c78c62..fb991122 100644
--- a/spec/compilers/css_supports
+++ b/spec/compilers/css_supports
@@ -21,22 +21,22 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as C,
-  useSignal as B,
-  style as D
+  createElement as B,
+  useSignal as A,
+  style as C
 } from "./runtime.js";
 
-export const A = () => {
+export const D = () => {
   const
-    a = B(`blue`),
+    a = A(`blue`),
     b = () => {
       const _ = {
         [`--a-a`]: a.value
       };
       return _
     };
-  return C(`div`, {
+  return B(`div`, {
     className: `Main_test`,
-    style: D([b()])
+    style: C([b()])
   })
 };
diff --git a/spec/compilers/css_with_ands b/spec/compilers/css_with_ands
index c7ed74e8..c59fc541 100644
--- a/spec/compilers/css_with_ands
+++ b/spec/compilers/css_with_ands
@@ -32,10 +32,10 @@ component Main {
 }
 
 ---=== /__mint__/index.js ===---
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
-  return B(`div`, {
+export const B = () => {
+  return A(`div`, {
     className: `Main_test`
   })
 };
diff --git a/spec/compilers/css_with_arguments b/spec/compilers/css_with_arguments
index da0f4dee..e6433007 100644
--- a/spec/compilers/css_with_arguments
+++ b/spec/compilers/css_with_arguments
@@ -15,19 +15,19 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as B,
-  style as C
+  createElement as A,
+  style as B
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   const a = (b) => {
     const _ = {
       [`--a-a`]: b
     };
     return _
   };
-  return B(`div`, {
+  return A(`div`, {
     className: `Main_test`,
-    style: C([a(`red`)])
+    style: B([a(`red`)])
   })
 };
diff --git a/spec/compilers/css_with_case b/spec/compilers/css_with_case
index b3154b5d..0ab66257 100644
--- a/spec/compilers/css_with_case
+++ b/spec/compilers/css_with_case
@@ -23,15 +23,15 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as C,
-  style as D,
-  match as B
+  createElement as B,
+  style as C,
+  match as A
 } from "./runtime.js";
 
-export const A = () => {
+export const D = () => {
   const a = () => {
     const _ = {};
-    B(`a`, [
+    A(`a`, [
       [
         `a`,
         () => {
@@ -51,8 +51,8 @@ export const A = () => {
     ]);
     return _
   };
-  return C(`div`, {
+  return B(`div`, {
     className: `Main_test`,
-    style: D([a()])
+    style: C([a()])
   })
 };
diff --git a/spec/compilers/css_with_else_if b/spec/compilers/css_with_else_if
index 2579ad24..9d6359a5 100644
--- a/spec/compilers/css_with_else_if
+++ b/spec/compilers/css_with_else_if
@@ -25,23 +25,23 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as C,
-  compare as B,
-  style as D
+  createElement as B,
+  compare as A,
+  style as C
 } from "./runtime.js";
 
-export const A = () => {
+export const D = () => {
   const a = (b) => {
     const _ = {};
-    (B(b, `red`) ? Object.assign(_, {
+    (A(b, `red`) ? Object.assign(_, {
       [`--a-a`]: `red`
-    }) : (B(b, `blue`) ? Object.assign(_, {
+    }) : (A(b, `blue`) ? Object.assign(_, {
       [`--a-a`]: `blue`
     }) : null));
     return _
   };
-  return C(`div`, {}, [C(`div`, {
+  return B(`div`, {}, [B(`div`, {
     className: `Main_base`,
-    style: D([a(`blue`)])
+    style: C([a(`blue`)])
   })])
 };
diff --git a/spec/compilers/css_with_if b/spec/compilers/css_with_if
index 4ef9ba40..4b0e8ca7 100644
--- a/spec/compilers/css_with_if
+++ b/spec/compilers/css_with_if
@@ -21,11 +21,11 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as B,
-  style as C
+  createElement as A,
+  style as B
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   const a = () => {
     const _ = {};
     (true ? Object.assign(_, {
@@ -35,8 +35,8 @@ export const A = () => {
     }));
     return _
   };
-  return B(`div`, {
+  return A(`div`, {
     className: `Main_test`,
-    style: C([a()])
+    style: B([a()])
   })
 };
diff --git a/spec/compilers/css_with_if_and_case b/spec/compilers/css_with_if_and_case
index 91233822..f93284d0 100644
--- a/spec/compilers/css_with_if_and_case
+++ b/spec/compilers/css_with_if_and_case
@@ -26,15 +26,15 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as C,
-  style as D,
-  match as B
+  createElement as B,
+  style as C,
+  match as A
 } from "./runtime.js";
 
-export const A = () => {
+export const D = () => {
   const a = () => {
     const _ = {};
-    B(true, [
+    A(true, [
       [
         true,
         () => {
@@ -59,8 +59,8 @@ export const A = () => {
     }));
     return _
   };
-  return C(`div`, {
+  return B(`div`, {
     className: `Main_test`,
-    style: D([a()])
+    style: C([a()])
   })
 };
diff --git a/spec/compilers/css_with_if_same_condition b/spec/compilers/css_with_if_same_condition
index b470533b..f90c2a21 100644
--- a/spec/compilers/css_with_if_same_condition
+++ b/spec/compilers/css_with_if_same_condition
@@ -33,11 +33,11 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as B,
-  style as C
+  createElement as A,
+  style as B
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   const a = () => {
     const _ = {};
     (true ? Object.assign(_, {
@@ -52,8 +52,8 @@ export const A = () => {
     }));
     return _
   };
-  return B(`div`, {
+  return A(`div`, {
     className: `Main_test`,
-    style: C([a()])
+    style: B([a()])
   })
 };
diff --git a/spec/compilers/css_with_if_variables b/spec/compilers/css_with_if_variables
index 9420809b..712c9c5d 100644
--- a/spec/compilers/css_with_if_variables
+++ b/spec/compilers/css_with_if_variables
@@ -28,14 +28,14 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as C,
+  createElement as B,
   signal as A,
-  style as D
+  style as C
 } from "./runtime.js";
 
 export const
   a = A(false),
-  B = () => {
+  D = () => {
     const b = () => {
       const _ = {};
       (a.value ? Object.assign(_, {
@@ -45,8 +45,8 @@ export const
       }));
       return _
     };
-    return C(`div`, {
+    return B(`div`, {
       className: `Main_test`,
-      style: D([b()])
+      style: C([b()])
     })
   };
diff --git a/spec/compilers/css_with_if_with_interpolation b/spec/compilers/css_with_if_with_interpolation
index 54a2e350..911abaee 100644
--- a/spec/compilers/css_with_if_with_interpolation
+++ b/spec/compilers/css_with_if_with_interpolation
@@ -21,11 +21,11 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as B,
-  style as C
+  createElement as A,
+  style as B
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   const a = () => {
     const _ = {};
     (true ? Object.assign(_, {
@@ -35,8 +35,8 @@ export const A = () => {
     }));
     return _
   };
-  return B(`div`, {
+  return A(`div`, {
     className: `Main_test`,
-    style: C([a()])
+    style: B([a()])
   })
 };
diff --git a/spec/compilers/dce_remove_component_computed_property b/spec/compilers/dce_remove_component_computed_property
index 4313d58e..b0fc7de7 100644
--- a/spec/compilers/dce_remove_component_computed_property
+++ b/spec/compilers/dce_remove_component_computed_property
@@ -8,8 +8,8 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
-  return B(`div`, {})
+export const B = () => {
+  return A(`div`, {})
 };
diff --git a/spec/compilers/dce_remove_component_function b/spec/compilers/dce_remove_component_function
index b7e25d8a..30b5389f 100644
--- a/spec/compilers/dce_remove_component_function
+++ b/spec/compilers/dce_remove_component_function
@@ -8,8 +8,8 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
-  return B(`div`, {})
+export const B = () => {
+  return A(`div`, {})
 };
diff --git a/spec/compilers/dce_style b/spec/compilers/dce_style
index 278f4f98..874cc137 100644
--- a/spec/compilers/dce_style
+++ b/spec/compilers/dce_style
@@ -8,8 +8,8 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
-  return B(`div`, {})
+export const B = () => {
+  return A(`div`, {})
 };
diff --git a/spec/compilers/decode b/spec/compilers/decode
index 027759c6..e17e6144 100644
--- a/spec/compilers/decode
+++ b/spec/compilers/decode
@@ -21,21 +21,21 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  decodeString as E,
-  decoder as D,
-  variant as B
+  decodeString as C,
+  decoder as B,
+  variant as A
 } from "./runtime.js";
 
 export const
-  A = B(1),
-  C = B(1),
-  a = D({
-    blah: E(C, A)
-  }, C, A),
-  b = D({
-    name: E(C, A),
+  D = A(1),
+  E = A(1),
+  a = B({
+    blah: C(E, D)
+  }, E, D),
+  b = B({
+    name: C(E, D),
     y: a
-  }, C, A),
+  }, E, D),
   F = () => {
     b((null));
     return ``
diff --git a/spec/compilers/decode_function b/spec/compilers/decode_function
index 824734ba..346767c0 100644
--- a/spec/compilers/decode_function
+++ b/spec/compilers/decode_function
@@ -21,21 +21,21 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  decodeString as E,
-  decoder as D,
-  variant as B
+  decodeString as C,
+  decoder as B,
+  variant as A
 } from "./runtime.js";
 
 export const
-  A = B(1),
-  C = B(1),
-  a = D({
-    blah: E(C, A)
-  }, C, A),
-  b = D({
-    name: E(C, A),
+  D = A(1),
+  E = A(1),
+  a = B({
+    blah: C(E, D)
+  }, E, D),
+  b = B({
+    name: C(E, D),
     y: a
-  }, C, A),
+  }, E, D),
   F = () => {
     (b)((null));
     return ``
diff --git a/spec/compilers/decode_map b/spec/compilers/decode_map
index 5b42bd6e..84dc2673 100644
--- a/spec/compilers/decode_map
+++ b/spec/compilers/decode_map
@@ -12,15 +12,15 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  decodeNumber as F,
-  decodeMap as E,
-  variant as B
+  decodeNumber as C,
+  decodeMap as B,
+  variant as A
 } from "./runtime.js";
 
 export const
-  A = B(1),
-  C = B(1),
-  D = () => {
-    E(F(C, A), C, A)((([])));
+  D = A(1),
+  E = A(1),
+  F = () => {
+    B(C(E, D), E, D)((([])));
     return ``
   };
diff --git a/spec/compilers/decode_tuple b/spec/compilers/decode_tuple
index ec12d75e..0aaa8745 100644
--- a/spec/compilers/decode_tuple
+++ b/spec/compilers/decode_tuple
@@ -12,20 +12,20 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  decodeNumber as G,
-  decodeString as F,
-  decodeTuple as E,
-  variant as B
+  decodeNumber as D,
+  decodeString as C,
+  decodeTuple as B,
+  variant as A
 } from "./runtime.js";
 
 export const
-  A = B(1),
-  C = B(1),
-  D = () => {
-    E([
-      F(C, A),
-      G(C, A),
-      F(C, A)
-    ], C, A)((([])));
+  E = A(1),
+  F = A(1),
+  G = () => {
+    B([
+      C(F, E),
+      D(F, E),
+      C(F, E)
+    ], F, E)((([])));
     return ``
   };
diff --git a/spec/compilers/decoder b/spec/compilers/decoder
index b92ae10e..55a3756d 100644
--- a/spec/compilers/decoder
+++ b/spec/compilers/decoder
@@ -30,36 +30,36 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  decodeBoolean as K,
-  decodeString as I,
-  decodeNumber as G,
-  decodeArray as J,
-  decodeMaybe as H,
-  decodeTime as L,
-  decoder as F,
-  variant as B
+  decodeBoolean as G,
+  decodeString as E,
+  decodeNumber as C,
+  decodeArray as F,
+  decodeMaybe as D,
+  decodeTime as H,
+  decoder as B,
+  variant as A
 } from "./runtime.js";
 
 export const
-  A = B(1),
-  C = B(0),
-  D = B(1),
-  E = B(1),
-  a = F({
+  I = A(1),
+  J = A(0),
+  K = A(1),
+  L = A(1),
+  a = B({
     size: [
-      G(E, D),
+      C(L, K),
       "SIIIZEEE"
     ]
-  }, E, D),
-  b = F({
-    maybe: H(I(E, D), E, D, A, C),
-    array: J(I(E, D), E, D),
-    string: I(E, D),
-    number: G(E, D),
-    bool: K(E, D),
-    time: L(E, D),
+  }, L, K),
+  b = B({
+    maybe: D(E(L, K), L, K, I, J),
+    array: F(E(L, K), L, K),
+    string: E(L, K),
+    number: C(L, K),
+    bool: G(L, K),
+    time: H(L, K),
     y: a
-  }, E, D),
+  }, L, K),
   M = () => {
     b(undefined);
     return ``
diff --git a/spec/compilers/defer b/spec/compilers/defer
index a82b625c..4b618f95 100644
--- a/spec/compilers/defer
+++ b/spec/compilers/defer
@@ -28,9 +28,9 @@ component Main {
 --------------------------------------------------------------------------------
 ---=== /__mint__/index.js ===---
 import {
-  createElement as D,
-  useEffect as B,
-  load as C
+  createElement as C,
+  useEffect as A,
+  load as B
 } from "./runtime.js";
 
 export const
@@ -38,23 +38,23 @@ export const
     return `Blah`
   },
   b = `./1.js`,
-  A = () => {
-    B(() => {
+  D = () => {
+    A(() => {
       (async () => {
-        const c = await C(b);
+        const c = await B(b);
         return c
       })()
     }, []);
-    return D(`div`, {}, [a()])
+    return C(`div`, {}, [a()])
   };
 
 ---=== /__mint__/1.js ===---
-import { a as c } from "./index.js";
+import { a } from "./index.js";
 
 export const
-  a = () => {
+  b = () => {
     return `Hello!`
   },
-  b = a() + c();
+  c = b() + a();
 
-export default b;
+export default c;
diff --git a/spec/compilers/defer_2 b/spec/compilers/defer_2
index c9acd434..14486f47 100644
--- a/spec/compilers/defer_2
+++ b/spec/compilers/defer_2
@@ -16,27 +16,27 @@ component Main {
 --------------------------------------------------------------------------------
 ---=== /__mint__/index.js ===---
 import {
-  patternVariable as E,
-  createElement as F,
-  destructure as C,
-  useEffect as B,
-  load as D
+  patternVariable as D,
+  createElement as E,
+  destructure as B,
+  useEffect as A,
+  load as C
 } from "./runtime.js";
 
 export const
   a = `./1.js`,
-  A = () => {
-    B(() => {
+  F = () => {
+    A(() => {
       (async () => {
-        const b = C(await D(a), [E]);
+        const b = B(await C(a), [D]);
         if (b === false) {
           return ``
         };
         const [c] = b;
-        return await D(c)
+        return await C(c)
       })()
     }, []);
-    return F(`div`, {}, [``])
+    return E(`div`, {}, [``])
   };
 
 ---=== /__mint__/1.js ===---
diff --git a/spec/compilers/destructuring b/spec/compilers/destructuring
index 02d4e1a7..bea76d8c 100644
--- a/spec/compilers/destructuring
+++ b/spec/compilers/destructuring
@@ -22,34 +22,34 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  patternVariable as H,
-  newVariant as E,
-  pattern as G,
-  variant as B,
-  match as F
+  patternVariable as E,
+  newVariant as B,
+  pattern as D,
+  variant as A,
+  match as C
 } from "./runtime.js";
 
 export const
-  A = B([
+  F = A([
     "matchString",
     "content",
     "key"
   ]),
-  C = B(0),
-  D = () => {
-    const a = E(A)(`MATCHSTRING`, `CONTENT`, `KEY`);
-    return F(a, [
+  G = A(0),
+  H = () => {
+    const a = B(F)(`MATCHSTRING`, `CONTENT`, `KEY`);
+    return C(a, [
       [
-        G(A, [
+        D(F, [
           null,
-          H
+          E
         ]),
         (b) => {
           return b
         }
       ],
       [
-        G(C, []),
+        D(G, []),
         () => {
           return ``
         }
diff --git a/spec/compilers/destructuring_constant b/spec/compilers/destructuring_constant
index c9b0e2a3..54c8cea4 100644
--- a/spec/compilers/destructuring_constant
+++ b/spec/compilers/destructuring_constant
@@ -11,12 +11,12 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { match as B } from "./runtime.js";
+import { match as A } from "./runtime.js";
 
 export const
   a = `Hello`,
-  A = () => {
-    return B(``, [
+  B = () => {
+    return A(``, [
       [
         a,
         () => {
diff --git a/spec/compilers/destructuring_state b/spec/compilers/destructuring_state
index be6d9ab0..08eec52b 100644
--- a/spec/compilers/destructuring_state
+++ b/spec/compilers/destructuring_state
@@ -13,13 +13,13 @@ component Main {
 --------------------------------------------------------------------------------
 import {
   signal as A,
-  match as C
+  match as B
 } from "./runtime.js";
 
 export const
   a = A(`Hello`),
-  B = () => {
-    return C(``, [
+  C = () => {
+    return B(``, [
       [
         a.value,
         () => {
diff --git a/spec/compilers/directives/highlight b/spec/compilers/directives/highlight
index d84cc121..73d1abb4 100644
--- a/spec/compilers/directives/highlight
+++ b/spec/compilers/directives/highlight
@@ -7,16 +7,16 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as B,
-  fragment as C
+  createElement as A,
+  fragment as B
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   return [
     `Test`,
-    B(C, {}, [B("span", {
+    A(B, {}, [A("span", {
       className: "line"
-    }, [B("span", {
+    }, [A("span", {
       className: "string"
     }, [`"Test"`])])])
   ][1]
diff --git a/spec/compilers/directives/highlight-comments-multiple b/spec/compilers/directives/highlight-comments-multiple
index 34343cac..36373140 100644
--- a/spec/compilers/directives/highlight-comments-multiple
+++ b/spec/compilers/directives/highlight-comments-multiple
@@ -9,38 +9,38 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as B,
-  fragment as C
+  createElement as A,
+  fragment as B
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   return [
     ``,
-    B(C, {}, [
-      B("span", {
+    A(B, {}, [
+      A("span", {
         className: "line"
       }, [
-        B("span", {
+        A("span", {
           className: "comment"
         }, [`// Comment1`]),
         `
 `
       ]),
-      B("span", {
+      A("span", {
         className: "line"
       }, [
         ``,
-        B("span", {
+        A("span", {
           className: "comment"
         }, [`// Comment2`]),
         `
 `
       ]),
-      B("span", {
+      A("span", {
         className: "line"
       }, [
         ``,
-        B("span", {
+        A("span", {
           className: "string"
         }, [`""`])
       ])
diff --git a/spec/compilers/directives/highlight-file b/spec/compilers/directives/highlight-file
index 0c5c5c4e..cf396afb 100644
--- a/spec/compilers/directives/highlight-file
+++ b/spec/compilers/directives/highlight-file
@@ -5,62 +5,62 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as B,
-  fragment as C
+  createElement as A,
+  fragment as B
 } from "./runtime.js";
 
-export const A = () => {
-  return B(C, {}, [
-    B("span", {
+export const C = () => {
+  return A(B, {}, [
+    A("span", {
       className: "line"
     }, [
-      B("span", {
+      A("span", {
         className: "keyword"
       }, [`component`]),
       ` `,
-      B("span", {
+      A("span", {
         className: "type"
       }, [`Main`]),
       ` {
 `
     ]),
-    B("span", {
+    A("span", {
       className: "line"
     }, [
       `  `,
-      B("span", {
+      A("span", {
         className: "keyword"
       }, [`fun`]),
       ` render : `,
-      B("span", {
+      A("span", {
         className: "type"
       }, [`Html`]),
       ` {
 `
     ]),
-    B("span", {
+    A("span", {
       className: "line"
     }, [
       `    <`,
-      B("span", {
+      A("span", {
         className: "namespace"
       }, [`div`]),
       `></`,
-      B("span", {
+      A("span", {
         className: "namespace"
       }, [`div`]),
       `>
 `
     ]),
-    B("span", {
+    A("span", {
       className: "line"
     }, [`  }
 `]),
-    B("span", {
+    A("span", {
       className: "line"
     }, [`}
 `]),
-    B("span", {
+    A("span", {
       className: "line"
     }, [``])
   ])
diff --git a/spec/compilers/encode_in_async b/spec/compilers/encode_in_async
index 1cc98e82..4d595c62 100644
--- a/spec/compilers/encode_in_async
+++ b/spec/compilers/encode_in_async
@@ -13,19 +13,19 @@ component Main {
 --------------------------------------------------------------------------------
 ---=== /__mint__/index.js ===---
 import {
-  lazyComponent as E,
-  createElement as D,
-  lazy as B
+  lazyComponent as C,
+  createElement as B,
+  lazy as A
 } from "./runtime.js";
 
 export const
-  A = B(`./1.js`),
-  C = () => {
-    return D(E, {
+  D = A(`./1.js`),
+  E = () => {
+    return B(C, {
       c: [],
       key: `X`,
       p: {},
-      x: A
+      x: D
     })
   };
 
diff --git a/spec/compilers/encoder_and_decoder b/spec/compilers/encoder_and_decoder
index 0c935861..71c10b48 100644
--- a/spec/compilers/encoder_and_decoder
+++ b/spec/compilers/encoder_and_decoder
@@ -18,24 +18,24 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  decodeNumber as F,
-  decodeString as E,
-  identity as H,
-  encoder as G,
-  decoder as D,
-  variant as B
+  decodeNumber as D,
+  decodeString as C,
+  identity as F,
+  encoder as E,
+  decoder as B,
+  variant as A
 } from "./runtime.js";
 
 export const
-  A = B(1),
-  C = B(1),
-  a = D({
-    string: E(C, A),
-    number: F(C, A)
-  }, C, A),
-  b = G({
-    string: H,
-    number: H
+  G = A(1),
+  H = A(1),
+  a = B({
+    string: C(H, G),
+    number: D(H, G)
+  }, H, G),
+  b = E({
+    string: F,
+    number: F
   }),
   I = () => {
     a(undefined);
diff --git a/spec/compilers/field b/spec/compilers/field
index fa3afe1d..e59d3a46 100644
--- a/spec/compilers/field
+++ b/spec/compilers/field
@@ -14,12 +14,12 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
+export const B = () => {
   {
     a: `Hello`,
     b: 0
   };
-  return B(`div`, {})
+  return A(`div`, {})
 };
diff --git a/spec/compilers/field_access b/spec/compilers/field_access
index d71b5457..956c9e7a 100644
--- a/spec/compilers/field_access
+++ b/spec/compilers/field_access
@@ -24,13 +24,13 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { access as B } from "./runtime.js";
+import { access as A } from "./runtime.js";
 
 export const
   a = (b, c) => {
     return undefined
   },
-  A = () => {
+  B = () => {
     a([
       {
         name: `Joe`
@@ -38,6 +38,6 @@ export const
       {
         name: `Doe`
       }
-    ], B(`name`));
+    ], A(`name`));
     return `asd`
   };
diff --git a/spec/compilers/for b/spec/compilers/for
index 22d34470..fd95bab9 100644
--- a/spec/compilers/for
+++ b/spec/compilers/for
@@ -8,9 +8,9 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
+export const B = () => {
   return (() => {
     const _0 = [];
     const _1 = [
@@ -20,7 +20,7 @@ export const A = () => {
     let _i = -1;
     for (let a of _1) {
       _i++;
-      _0.push(B(`div`, {}, [a]))
+      _0.push(A(`div`, {}, [a]))
     };
     return _0
   })()
diff --git a/spec/compilers/for_with_destructuring b/spec/compilers/for_with_destructuring
index a2a1c7b6..30b6a7aa 100644
--- a/spec/compilers/for_with_destructuring
+++ b/spec/compilers/for_with_destructuring
@@ -9,12 +9,12 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  patternVariable as C,
-  createElement as D,
-  destructure as B
+  patternVariable as B,
+  createElement as C,
+  destructure as A
 } from "./runtime.js";
 
-export const A = () => {
+export const D = () => {
   return (() => {
     const _0 = [];
     const _1 = [[
@@ -27,11 +27,11 @@ export const A = () => {
       const [
         b,
         c
-      ] = B(a, [
-        C,
-        C
+      ] = A(a, [
+        B,
+        B
       ]);
-      _0.push(D(`div`, {}, [`${b},${c}`]))
+      _0.push(C(`div`, {}, [`${b},${c}`]))
     };
     return _0
   })()
diff --git a/spec/compilers/for_with_index b/spec/compilers/for_with_index
index 1b1e470e..ae849f56 100644
--- a/spec/compilers/for_with_index
+++ b/spec/compilers/for_with_index
@@ -11,11 +11,11 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as C,
-  compare as B
+  createElement as B,
+  compare as A
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   return (() => {
     const _0 = [];
     const _1 = [
@@ -26,11 +26,11 @@ export const A = () => {
     for (let a of _1) {
       _i++;
       const b = _i;
-      const _2 = B(b, 10);
+      const _2 = A(b, 10);
       if (!_2) {
         continue
       };
-      _0.push(C(`div`, {}, [a]))
+      _0.push(B(`div`, {}, [a]))
     };
     return _0
   })()
diff --git a/spec/compilers/for_with_index_2 b/spec/compilers/for_with_index_2
index 3cb44308..aed69fff 100644
--- a/spec/compilers/for_with_index_2
+++ b/spec/compilers/for_with_index_2
@@ -8,9 +8,9 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
+export const B = () => {
   return (() => {
     const _0 = [];
     const _1 = [
@@ -21,7 +21,7 @@ export const A = () => {
     for (let a of _1) {
       _i++;
       const b = _i;
-      _0.push(B(`div`, {}, [a]))
+      _0.push(A(`div`, {}, [a]))
     };
     return _0
   })()
diff --git a/spec/compilers/function_call_with_arguments b/spec/compilers/function_call_with_arguments
index 9188dc23..3f42aae2 100644
--- a/spec/compilers/function_call_with_arguments
+++ b/spec/compilers/function_call_with_arguments
@@ -25,4 +25,3 @@ export const A = () => {
   d();
   return ``
 };
-
diff --git a/spec/compilers/here_doc_markdown b/spec/compilers/here_doc_markdown
index 05f5b8b2..b17b2ddf 100644
--- a/spec/compilers/here_doc_markdown
+++ b/spec/compilers/here_doc_markdown
@@ -9,13 +9,13 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as B,
-  fragment as C
+  createElement as A,
+  fragment as B
 } from "./runtime.js";
 
-export const A = () => {
-  return B(C, {}, [
-    B('h2', {}, [`Hello There`]),
-    B('p', {}, [`WTF`])
+export const C = () => {
+  return A(B, {}, [
+    A('h2', {}, [`Hello There`]),
+    A('p', {}, [`WTF`])
   ])
 };
diff --git a/spec/compilers/here_doc_markdown_escape b/spec/compilers/here_doc_markdown_escape
index ccec02e8..6ae37f67 100644
--- a/spec/compilers/here_doc_markdown_escape
+++ b/spec/compilers/here_doc_markdown_escape
@@ -14,61 +14,61 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as B,
-  fragment as C
+  createElement as A,
+  fragment as B
 } from "./runtime.js";
 
-export const A = () => {
-  return B(C, {}, [
-    B('p', {}, [`#{name}`]),
-    B('pre', {}, [B('code', {
+export const C = () => {
+  return A(B, {}, [
+    A('p', {}, [`#{name}`]),
+    A('pre', {}, [A('code', {
       class: "language-mint"
     }, [
-      B('span', {
+      A('span', {
         class: "line"
       }, [`\`Something\`
 `]),
-      B('span', {
+      A('span', {
         class: "line"
       }, [
         ``,
-        B('span', {
+        A('span', {
           class: "string"
         }, [`"#{`]),
-        B('span', {
+        A('span', {
           class: "variable"
         }, [`name`]),
-        B('span', {
+        A('span', {
           class: "string"
         }, [`}"`]),
         `
 `
       ]),
-      B('span', {
+      A('span', {
         class: "line"
       }, [
         ``,
-        B('span', {
+        A('span', {
           class: "string"
         }, [`"First line" \\`]),
         `
 `
       ]),
-      B('span', {
+      A('span', {
         class: "line"
       }, [
         ``,
-        B('span', {
+        A('span', {
           class: "string"
         }, [`"Second line" \\`]),
         `
 `
       ]),
-      B('span', {
+      A('span', {
         class: "line"
       }, [
         ``,
-        B('span', {
+        A('span', {
           class: "string"
         }, [`"Third line"`])
       ])
diff --git a/spec/compilers/here_doc_markdown_in_markdown b/spec/compilers/here_doc_markdown_in_markdown
index 0ae9c39c..81a03025 100644
--- a/spec/compilers/here_doc_markdown_in_markdown
+++ b/spec/compilers/here_doc_markdown_in_markdown
@@ -17,65 +17,65 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as B,
-  fragment as C
+  createElement as A,
+  fragment as B
 } from "./runtime.js";
 
-export const A = () => {
-  return B(C, {}, [B('pre', {}, [B('code', {
+export const C = () => {
+  return A(B, {}, [A('pre', {}, [A('code', {
     class: "language-mint"
   }, [
-    B('span', {
+    A('span', {
       class: "line"
     }, [
       `<<#MD(`,
-      B('span', {
+      A('span', {
         class: "keyword"
       }, [`highlight`]),
       `)`,
-      B('span', {
+      A('span', {
         class: "string"
       }, [``])
     ]),
-    B('span', {
+    A('span', {
       class: "line"
-    }, [B('span', {
+    }, [A('span', {
       class: "string"
     }, [`This is a paragraph.`])]),
-    B('span', {
+    A('span', {
       class: "line"
-    }, [B('span', {
+    }, [A('span', {
       class: "string"
     }, [``])]),
-    B('span', {
+    A('span', {
       class: "line"
-    }, [B('span', {
+    }, [A('span', {
       class: "string"
     }, [`\`\`\`mint`])]),
-    B('span', {
+    A('span', {
       class: "line"
-    }, [B('span', {
+    }, [A('span', {
       class: "string"
     }, [`module Mint {`])]),
-    B('span', {
+    A('span', {
       class: "line"
-    }, [B('span', {
+    }, [A('span', {
       class: "string"
     }, [`  // This will be syntax highlighted`])]),
-    B('span', {
+    A('span', {
       class: "line"
-    }, [B('span', {
+    }, [A('span', {
       class: "string"
     }, [`}`])]),
-    B('span', {
+    A('span', {
       class: "line"
-    }, [B('span', {
+    }, [A('span', {
       class: "string"
     }, [`\`\`\``])]),
-    B('span', {
+    A('span', {
       class: "line"
     }, [
-      B('span', {
+      A('span', {
         class: "string"
       }, [``]),
       `MD`
diff --git a/spec/compilers/here_doc_markdown_with_code_block b/spec/compilers/here_doc_markdown_with_code_block
index 3c9d7dc8..623c889d 100644
--- a/spec/compilers/here_doc_markdown_with_code_block
+++ b/spec/compilers/here_doc_markdown_with_code_block
@@ -13,27 +13,27 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as B,
-  fragment as C
+  createElement as A,
+  fragment as B
 } from "./runtime.js";
 
-export const A = () => {
-  return B(C, {}, [
-    B('p', {}, [`Text`]),
-    B('pre', {}, [B('code', {
+export const C = () => {
+  return A(B, {}, [
+    A('p', {}, [`Text`]),
+    A('pre', {}, [A('code', {
       class: "language-mint"
-    }, [B('span', {
+    }, [A('span', {
       class: "line"
     }, [
-      B('span', {
+      A('span', {
         class: "keyword"
       }, [`module`]),
       ` `,
-      B('span', {
+      A('span', {
         class: "type"
       }, [`Time`]),
       ` {}`
     ])])]),
-    B('p', {}, [`Text`])
+    A('p', {}, [`Text`])
   ])
 };
diff --git a/spec/compilers/here_doc_markdown_with_code_block_interpolation b/spec/compilers/here_doc_markdown_with_code_block_interpolation
index 3b70a1a1..bb4b94fc 100644
--- a/spec/compilers/here_doc_markdown_with_code_block_interpolation
+++ b/spec/compilers/here_doc_markdown_with_code_block_interpolation
@@ -11,16 +11,16 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as B,
-  fragment as C
+  createElement as A,
+  fragment as B
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   const a = [
     0,
     0
   ];
-  return B(C, {}, [B('pre', {}, [B('code', {
+  return A(B, {}, [A('pre', {}, [A('code', {
     class: "language-mint"
   }, [
     `<div>"`,
diff --git a/spec/compilers/here_doc_markdown_with_code_block_interpolation_highlight b/spec/compilers/here_doc_markdown_with_code_block_interpolation_highlight
index a9d137e9..1a132991 100644
--- a/spec/compilers/here_doc_markdown_with_code_block_interpolation_highlight
+++ b/spec/compilers/here_doc_markdown_with_code_block_interpolation_highlight
@@ -11,26 +11,26 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as B,
-  fragment as C
+  createElement as A,
+  fragment as B
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   const a = [
     0,
     0
   ];
-  return B(C, {}, [B('pre', {}, [B('code', {
+  return A(B, {}, [A('pre', {}, [A('code', {
     class: "language-mint"
-  }, [B('span', {
+  }, [A('span', {
     class: "line"
   }, [
     `<`,
-    B('span', {
+    A('span', {
       class: "namespace"
     }, [`div`]),
     `>`,
-    B('span', {
+    A('span', {
       class: "string"
     }, [
       `"`,
@@ -40,7 +40,7 @@ export const A = () => {
       `"`
     ]),
     `</`,
-    B('span', {
+    A('span', {
       class: "namespace"
     }, [`div`]),
     `>`
diff --git a/spec/compilers/here_doc_markdown_with_code_block_multiline b/spec/compilers/here_doc_markdown_with_code_block_multiline
index 254cfeba..196fe8e7 100644
--- a/spec/compilers/here_doc_markdown_with_code_block_multiline
+++ b/spec/compilers/here_doc_markdown_with_code_block_multiline
@@ -15,51 +15,51 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as B,
-  fragment as C
+  createElement as A,
+  fragment as B
 } from "./runtime.js";
 
-export const A = () => {
-  return B(C, {}, [
-    B('p', {}, [`Text`]),
-    B('pre', {}, [B('code', {
+export const C = () => {
+  return A(B, {}, [
+    A('p', {}, [`Text`]),
+    A('pre', {}, [A('code', {
       class: "language-mint"
     }, [
-      B('span', {
+      A('span', {
         class: "line"
       }, [
-        B('span', {
+        A('span', {
           class: "keyword"
         }, [`module`]),
         ` `,
-        B('span', {
+        A('span', {
           class: "type"
         }, [`Time`]),
         ` {
 `
       ]),
-      B('span', {
+      A('span', {
         class: "line"
       }, [
         `  `,
-        B('span', {
+        A('span', {
           class: "keyword"
         }, [`const`]),
         ` `,
-        B('span', {
+        A('span', {
           class: "type"
         }, [`NOW`]),
         ` = `,
-        B('span', {
+        A('span', {
           class: "string"
         }, [`""`]),
         `
 `
       ]),
-      B('span', {
+      A('span', {
         class: "line"
       }, [`}`])
     ])]),
-    B('p', {}, [`Text`])
+    A('p', {}, [`Text`])
   ])
 };
diff --git a/spec/compilers/here_doc_markdown_with_html_interpolation b/spec/compilers/here_doc_markdown_with_html_interpolation
index 4f99a997..1aab2352 100644
--- a/spec/compilers/here_doc_markdown_with_html_interpolation
+++ b/spec/compilers/here_doc_markdown_with_html_interpolation
@@ -9,14 +9,14 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as C,
-  useSignal as B,
-  fragment as D
+  createElement as B,
+  useSignal as A,
+  fragment as C
 } from "./runtime.js";
 
-export const A = () => {
-  const a = B(C(`div`, {}));
-  return C(D, {}, [C('p', {}, [
+export const D = () => {
+  const a = A(B(`div`, {}));
+  return B(C, {}, [B('p', {}, [
     ``,
     a.value,
     ` Some text...`
diff --git a/spec/compilers/here_doc_markdown_with_inline_code b/spec/compilers/here_doc_markdown_with_inline_code
index 5d2835a4..d89a7ffa 100644
--- a/spec/compilers/here_doc_markdown_with_inline_code
+++ b/spec/compilers/here_doc_markdown_with_inline_code
@@ -7,14 +7,14 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as B,
-  fragment as C
+  createElement as A,
+  fragment as B
 } from "./runtime.js";
 
-export const A = () => {
-  return B(C, {}, [B('ul', {}, [B('li', {}, [
+export const C = () => {
+  return A(B, {}, [A('ul', {}, [A('li', {}, [
     `When open pressing `,
-    B('code', {}, [`Esc`]),
+    A('code', {}, [`Esc`]),
     ` closes it.`
   ])])])
 };
diff --git a/spec/compilers/here_doc_markdown_with_interpolation b/spec/compilers/here_doc_markdown_with_interpolation
index 25a697a3..d7f5c999 100644
--- a/spec/compilers/here_doc_markdown_with_interpolation
+++ b/spec/compilers/here_doc_markdown_with_interpolation
@@ -9,16 +9,16 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as B,
-  fragment as C
+  createElement as A,
+  fragment as B
 } from "./runtime.js";
 
-export const A = () => {
-  return B(C, {}, [
-    B('h2', {}, [`Hello There`]),
-    B('p', {}, [
+export const C = () => {
+  return A(B, {}, [
+    A('h2', {}, [`Hello There`]),
+    A('p', {}, [
       ``,
-      B(`div`, {}, [`Hello`]),
+      A(`div`, {}, [`Hello`]),
       ``,
       `
 `,
diff --git a/spec/compilers/html_attribute_class b/spec/compilers/html_attribute_class
index 7a778096..6e99c8cb 100644
--- a/spec/compilers/html_attribute_class
+++ b/spec/compilers/html_attribute_class
@@ -5,10 +5,10 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
-  return B(`div`, {
+export const B = () => {
+  return A(`div`, {
     className: `something`
   })
 };
diff --git a/spec/compilers/html_attribute_class_with_style b/spec/compilers/html_attribute_class_with_style
index b0ffe2c6..bb4eba6d 100644
--- a/spec/compilers/html_attribute_class_with_style
+++ b/spec/compilers/html_attribute_class_with_style
@@ -15,10 +15,10 @@ component Main {
 }
 
 ---=== /__mint__/index.js ===---
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
-  return B(`div`, {
+export const B = () => {
+  return A(`div`, {
     className: `something` + ` Main_base`
   })
 };
diff --git a/spec/compilers/html_attribute_html_fragment b/spec/compilers/html_attribute_html_fragment
index cbc9584a..63112248 100644
--- a/spec/compilers/html_attribute_html_fragment
+++ b/spec/compilers/html_attribute_html_fragment
@@ -12,16 +12,16 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
 export const
-  A = ({
+  B = ({
     a = null
   }) => {
-    return B(`div`, {})
+    return A(`div`, {})
   },
   C = () => {
-    return B(A, {
+    return A(B, {
       a: `x`
     })
   };
diff --git a/spec/compilers/html_attribute_readonly b/spec/compilers/html_attribute_readonly
index e2ec4c2e..0d919438 100644
--- a/spec/compilers/html_attribute_readonly
+++ b/spec/compilers/html_attribute_readonly
@@ -4,10 +4,11 @@ component Main {
     </div>
   }
 }
---------------------------------------------------------------------------------import { createElement as B } from "./runtime.js";
+--------------------------------------------------------------------------------
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
-  return B(`div`, {
+export const B = () => {
+  return A(`div`, {
     readOnly: true
   })
 };
diff --git a/spec/compilers/html_attribute_ref b/spec/compilers/html_attribute_ref
index 4569c3e4..88eda94c 100644
--- a/spec/compilers/html_attribute_ref
+++ b/spec/compilers/html_attribute_ref
@@ -11,19 +11,18 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as F,
-  variant as B,
-  setRef as G,
-  useRef as E
+  createElement as C,
+  variant as A,
+  setRef as D,
+  useRef as B
 } from "./runtime.js";
 
 export const
-  A = B(1),
-  C = B(0),
-  D = () => {
-    const a = E(new C());
-    return F(`div`, {
-      ref: G(a, A)
+  E = A(1),
+  F = A(0),
+  G = () => {
+    const a = B(new F());
+    return C(`div`, {
+      ref: D(a, E)
     })
   };
-
diff --git a/spec/compilers/html_attribute_simple b/spec/compilers/html_attribute_simple
index 0f80d128..187f919d 100644
--- a/spec/compilers/html_attribute_simple
+++ b/spec/compilers/html_attribute_simple
@@ -5,10 +5,10 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
-  return B(`div`, {
+export const B = () => {
+  return A(`div`, {
     "title": `Hello`
   })
 };
diff --git a/spec/compilers/html_attribute_with_expression b/spec/compilers/html_attribute_with_expression
index 5bad2b74..8100acc4 100644
--- a/spec/compilers/html_attribute_with_expression
+++ b/spec/compilers/html_attribute_with_expression
@@ -5,10 +5,10 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
-  return B(`div`, {
+export const B = () => {
+  return A(`div`, {
     "title": `Hello ` + `there!`
   })
 };
diff --git a/spec/compilers/html_component b/spec/compilers/html_component
index eebf4125..303abfb8 100644
--- a/spec/compilers/html_component
+++ b/spec/compilers/html_component
@@ -10,12 +10,12 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
 export const
-  A = () => {
-    return B(`div`, {})
+  B = () => {
+    return A(`div`, {})
   },
   C = () => {
-    return B(A, {})
+    return A(B, {})
   };
diff --git a/spec/compilers/html_fragment b/spec/compilers/html_fragment
index ccf06589..d3309d35 100644
--- a/spec/compilers/html_fragment
+++ b/spec/compilers/html_fragment
@@ -10,12 +10,12 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as B,
-  fragment as C
+  createElement as A,
+  fragment as B
 } from "./runtime.js";
 
-export const A = () => {
-  return B(`div`, {}, [B(C, {}, [
+export const C = () => {
+  return A(`div`, {}, [A(B, {}, [
     `A`,
     `B`
   ])])
diff --git a/spec/compilers/html_fragment_empty b/spec/compilers/html_fragment_empty
index 51f5a820..31e67071 100644
--- a/spec/compilers/html_fragment_empty
+++ b/spec/compilers/html_fragment_empty
@@ -7,8 +7,8 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
-  return B(`div`, {}, [null])
+export const B = () => {
+  return A(`div`, {}, [null])
 };
diff --git a/spec/compilers/html_with_custom_style b/spec/compilers/html_with_custom_style
index 07e5a814..ba6a5e2f 100644
--- a/spec/compilers/html_with_custom_style
+++ b/spec/compilers/html_with_custom_style
@@ -10,15 +10,15 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as B,
-  style as C
+  createElement as A,
+  style as B
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   const a = () => {
     return undefined
   };
-  return B(`div`, {
-    style: C([a()])
+  return A(`div`, {
+    style: B([a()])
   })
 };
diff --git a/spec/compilers/html_with_multiple_styles b/spec/compilers/html_with_multiple_styles
index ecca4946..cc4d365d 100644
--- a/spec/compilers/html_with_multiple_styles
+++ b/spec/compilers/html_with_multiple_styles
@@ -23,10 +23,10 @@ component Main {
 }
 
 ---=== /__mint__/index.js ===---
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
-  return B(`div`, {
+export const B = () => {
+  return A(`div`, {
     className: `Main_one Main_two`
   })
 };
diff --git a/spec/compilers/html_with_multiple_styles_and_parameters b/spec/compilers/html_with_multiple_styles_and_parameters
index 6f308f98..7f01df65 100644
--- a/spec/compilers/html_with_multiple_styles_and_parameters
+++ b/spec/compilers/html_with_multiple_styles_and_parameters
@@ -24,19 +24,19 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as B,
-  style as C
+  createElement as A,
+  style as B
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   const a = (b) => {
     const _ = {
       [`--a-a`]: b
     };
     return _
   };
-  return B(`div`, {
+  return A(`div`, {
     className: `Main_one Main_two`,
-    style: C([a(`blue`)])
+    style: B([a(`blue`)])
   })
 };
diff --git a/spec/compilers/html_with_multiple_styles_and_parameters_2 b/spec/compilers/html_with_multiple_styles_and_parameters_2
index b8b87a84..2dbbb254 100644
--- a/spec/compilers/html_with_multiple_styles_and_parameters_2
+++ b/spec/compilers/html_with_multiple_styles_and_parameters_2
@@ -24,11 +24,11 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as B,
-  style as C
+  createElement as A,
+  style as B
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   const
     a = (b) => {
       const _ = {
@@ -42,9 +42,9 @@ export const A = () => {
       };
       return _
     };
-  return B(`div`, {
+  return A(`div`, {
     className: `Main_one Main_two`,
-    style: C([
+    style: B([
       a(`red`),
       c(`blue`)
     ])
diff --git a/spec/compilers/html_with_pseudos b/spec/compilers/html_with_pseudos
index 787fb1c5..b48aa1f5 100644
--- a/spec/compilers/html_with_pseudos
+++ b/spec/compilers/html_with_pseudos
@@ -49,15 +49,15 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as C,
-  useSignal as B,
-  style as D
+  createElement as B,
+  useSignal as A,
+  style as C
 } from "./runtime.js";
 
-export const A = () => {
+export const D = () => {
   const
-    a = B(`yellow`),
-    b = B(`blue`),
+    a = A(`yellow`),
+    b = A(`blue`),
     c = () => {
       const _ = {
         [`--a-a`]: b.value,
@@ -66,8 +66,8 @@ export const A = () => {
       };
       return _
     };
-  return C(`div`, {
+  return B(`div`, {
     className: `Main_test`,
-    style: D([c()])
+    style: C([c()])
   })
 };
diff --git a/spec/compilers/html_with_string_style b/spec/compilers/html_with_string_style
index 726ef071..76eafba6 100644
--- a/spec/compilers/html_with_string_style
+++ b/spec/compilers/html_with_string_style
@@ -5,12 +5,12 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as B,
-  style as C
+  createElement as A,
+  style as B
 } from "./runtime.js";
 
-export const A = () => {
-  return B(`div`, {
-    style: C([`opacity:0;`])
+export const C = () => {
+  return A(`div`, {
+    style: B([`opacity:0;`])
   })
 };
diff --git a/spec/compilers/html_with_style b/spec/compilers/html_with_style
index bf103d91..dde8b838 100644
--- a/spec/compilers/html_with_style
+++ b/spec/compilers/html_with_style
@@ -62,15 +62,15 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as C,
-  useSignal as B,
-  style as D
+  createElement as B,
+  useSignal as A,
+  style as C
 } from "./runtime.js";
 
-export const A = () => {
+export const D = () => {
   const
-    a = B(`blue`),
-    b = B(`yellow`),
+    a = A(`blue`),
+    b = A(`yellow`),
     c = () => {
       const _ = {
         [`--a-a`]: a.value,
@@ -80,8 +80,8 @@ export const A = () => {
       };
       return _
     };
-  return C(`div`, {
+  return B(`div`, {
     className: `Main_test`,
-    style: D([c()])
+    style: C([c()])
   })
 };
diff --git a/spec/compilers/html_with_style_and_custom_style b/spec/compilers/html_with_style_and_custom_style
index f2e22d49..4a2a4574 100644
--- a/spec/compilers/html_with_style_and_custom_style
+++ b/spec/compilers/html_with_style_and_custom_style
@@ -24,14 +24,14 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as C,
-  useSignal as B,
-  style as D
+  createElement as B,
+  useSignal as A,
+  style as C
 } from "./runtime.js";
 
-export const A = () => {
+export const D = () => {
   const
-    a = B(`blue`),
+    a = A(`blue`),
     b = () => {
       return undefined
     },
@@ -41,9 +41,9 @@ export const A = () => {
       };
       return _
     };
-  return C(`div`, {
+  return B(`div`, {
     className: `Main_test`,
-    style: D([
+    style: C([
       c(),
       b()
     ])
diff --git a/spec/compilers/if b/spec/compilers/if
index 335d1847..7e4e4338 100644
--- a/spec/compilers/if
+++ b/spec/compilers/if
@@ -10,9 +10,9 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { compare as B } from "./runtime.js";
+import { compare as A } from "./runtime.js";
 
-export const A = () => {
-  (B(`asd`, `asd2`) ? true : false);
+export const B = () => {
+  (A(`asd`, `asd2`) ? true : false);
   return ``
 };
diff --git a/spec/compilers/if_let b/spec/compilers/if_let
index 8bbc909a..82f769d7 100644
--- a/spec/compilers/if_let
+++ b/spec/compilers/if_let
@@ -14,20 +14,20 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  patternVariable as H,
-  newVariant as F,
-  pattern as G,
-  variant as B,
-  match as E
+  patternVariable as E,
+  newVariant as C,
+  pattern as D,
+  variant as A,
+  match as B
 } from "./runtime.js";
 
 export const
-  A = B(1),
-  C = B(0),
-  D = () => {
-    return E(F(A)(``), [
+  F = A(1),
+  G = A(0),
+  H = () => {
+    return B(C(F)(``), [
       [
-        G(A, [H]),
+        D(F, [E]),
         (a) => {
           return a
         }
diff --git a/spec/compilers/if_let_await b/spec/compilers/if_let_await
index 0cdfd26c..89c7829b 100644
--- a/spec/compilers/if_let_await
+++ b/spec/compilers/if_let_await
@@ -18,21 +18,21 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  patternVariable as H,
-  newVariant as F,
-  pattern as G,
-  variant as B,
-  match as E
+  patternVariable as E,
+  newVariant as C,
+  pattern as D,
+  variant as A,
+  match as B
 } from "./runtime.js";
 
 export const
-  A = B(1),
-  C = B(0),
-  D = () => {
+  F = A(1),
+  G = A(0),
+  H = () => {
     (async () => {
-      return E(await F(A)(``), [
+      return B(await C(F)(``), [
         [
-          G(A, [H]),
+          D(F, [E]),
           (a) => {
             return a
           }
diff --git a/spec/compilers/if_without_else_array b/spec/compilers/if_without_else_array
index 41e93e5b..a183edf4 100644
--- a/spec/compilers/if_without_else_array
+++ b/spec/compilers/if_without_else_array
@@ -6,8 +6,8 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { compare as B } from "./runtime.js";
+import { compare as A } from "./runtime.js";
 
-export const A = () => {
-  return (B(`asd`, `asd2`) ? [`ARRAY`] : [])
+export const B = () => {
+  return (A(`asd`, `asd2`) ? [`ARRAY`] : [])
 };
diff --git a/spec/compilers/if_without_else_promise b/spec/compilers/if_without_else_promise
index b36a6069..3e28b3a3 100644
--- a/spec/compilers/if_without_else_promise
+++ b/spec/compilers/if_without_else_promise
@@ -8,9 +8,9 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { compare as B } from "./runtime.js";
+import { compare as A } from "./runtime.js";
 
-export const A = () => {
-  (B(`asd`, `asd2`) ? null : null);
+export const B = () => {
+  (A(`asd`, `asd2`) ? null : null);
   return ``
 };
diff --git a/spec/compilers/if_without_else_string b/spec/compilers/if_without_else_string
index 75726e3f..6db4fcee 100644
--- a/spec/compilers/if_without_else_string
+++ b/spec/compilers/if_without_else_string
@@ -6,8 +6,8 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { compare as B } from "./runtime.js";
+import { compare as A } from "./runtime.js";
 
-export const A = () => {
-  return (B(`asd`, `asd2`) ? `TRUE` : "")
+export const B = () => {
+  return (A(`asd`, `asd2`) ? `TRUE` : "")
 };
diff --git a/spec/compilers/locale_key b/spec/compilers/locale_key
index 91330bfe..69d7e554 100644
--- a/spec/compilers/locale_key
+++ b/spec/compilers/locale_key
@@ -9,19 +9,19 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  translations as C,
-  translate as B,
-  locale as D
+  translations as B,
+  translate as A,
+  locale as C
 } from "./runtime.js";
 
-export const A = () => {
-  return B(`test`)
+export const D = () => {
+  return A(`test`)
 };
 
-C.value = {
+B.value = {
   en: {
     'test': `Hello`
   }
 };
 
-D.value = `en`;
+C.value = `en`;
diff --git a/spec/compilers/map b/spec/compilers/map
index 2a9901e9..8976e2fa 100644
--- a/spec/compilers/map
+++ b/spec/compilers/map
@@ -9,9 +9,9 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
+export const B = () => {
   [
     [
       `a`,
@@ -22,5 +22,5 @@ export const A = () => {
       `World`
     ]
   ];
-  return B(`div`, {})
+  return A(`div`, {})
 };
diff --git a/spec/compilers/module_access_subscriptions b/spec/compilers/module_access_subscriptions
index d5b0150f..b93c8d89 100644
--- a/spec/compilers/module_access_subscriptions
+++ b/spec/compilers/module_access_subscriptions
@@ -25,9 +25,9 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createProvider as B,
-  subscriptions as C,
-  useId as E
+  createProvider as A,
+  subscriptions as B,
+  useId as C
 } from "./runtime.js";
 
 export const
@@ -35,17 +35,17 @@ export const
     return b
   },
   c = new Map(),
-  A = B(c, async () => {
-    C(c);
+  D = A(c, async () => {
+    B(c);
     return await null
   }),
-  D = () => {
-    const d = E();
-    A(d, () => {
+  E = () => {
+    const d = C();
+    D(d, () => {
       return {
         test: ``
       }
     });
-    C(c);
+    B(c);
     return a(`a`)
   };
diff --git a/spec/compilers/next_call b/spec/compilers/next_call
index 3e8b9774..a407d5b8 100644
--- a/spec/compilers/next_call
+++ b/spec/compilers/next_call
@@ -18,16 +18,16 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  useSignal as B,
-  batch as C
+  useSignal as A,
+  batch as B
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   const
-    a = B(`Joe`),
-    b = B(24),
+    a = A(`Joe`),
+    b = A(24),
     c = () => {
-      return C(() => {
+      return B(() => {
         a.value = `Hello`;
         b.value = 30
       })
diff --git a/spec/compilers/operation_chained b/spec/compilers/operation_chained
index 636b0546..166773d7 100644
--- a/spec/compilers/operation_chained
+++ b/spec/compilers/operation_chained
@@ -5,9 +5,9 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { compare as B } from "./runtime.js";
+import { compare as A } from "./runtime.js";
 
-export const A = () => {
-  B(`a`, `b`) && !B(true, false);
+export const B = () => {
+  A(`a`, `b`) && !A(true, false);
   return ``
 };
diff --git a/spec/compilers/operation_or b/spec/compilers/operation_or
index 8bc4b515..c7a5d364 100644
--- a/spec/compilers/operation_or
+++ b/spec/compilers/operation_or
@@ -15,15 +15,15 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  variant as B,
-  or as G
+  variant as A,
+  or as B
 } from "./runtime.js";
 
 export const
-  A = B(0),
-  C = B(1),
-  D = B(1),
-  E = B(1),
-  F = () => {
-    return G(A, D, new A(), `Hello`)
+  C = A(0),
+  D = A(1),
+  E = A(1),
+  F = A(1),
+  G = () => {
+    return B(C, E, new C(), `Hello`)
   };
diff --git a/spec/compilers/operation_simple b/spec/compilers/operation_simple
index c779827d..d838f1e5 100644
--- a/spec/compilers/operation_simple
+++ b/spec/compilers/operation_simple
@@ -5,9 +5,9 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { compare as B } from "./runtime.js";
+import { compare as A } from "./runtime.js";
 
-export const A = () => {
-  B(`a`, `b`);
+export const B = () => {
+  A(`a`, `b`);
   return ``
 };
diff --git a/spec/compilers/pipe b/spec/compilers/pipe
index f5887061..d4f131be 100644
--- a/spec/compilers/pipe
+++ b/spec/compilers/pipe
@@ -7,10 +7,10 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
-  return B(`div`, {}, [
+export const B = () => {
+  return A(`div`, {}, [
     ((a) => {
       return a
     })(`3`),
diff --git a/spec/compilers/pipe_await b/spec/compilers/pipe_await
index 3ae5ff1c..172e39a1 100644
--- a/spec/compilers/pipe_await
+++ b/spec/compilers/pipe_await
@@ -18,16 +18,16 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { compare as B } from "./runtime.js";
+import { compare as A } from "./runtime.js";
 
-export const A = () => {
+export const B = () => {
   const
     a = async (b) => {
       return await b
     },
     c = async () => {
       const d = await a(await a(`Hello`));
-      return B(d, `asd`)
+      return A(d, `asd`)
     };
   c();
   return ``
diff --git a/spec/compilers/property b/spec/compilers/property
index 89df7270..42183b4b 100644
--- a/spec/compilers/property
+++ b/spec/compilers/property
@@ -12,14 +12,14 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
 export const
-  A = ({
+  B = ({
     a = `Joe`
   }) => {
-    return B(`div`, {})
+    return A(`div`, {})
   },
   C = () => {
-    return B(A, {})
+    return A(B, {})
   };
diff --git a/spec/compilers/property_without_default b/spec/compilers/property_without_default
index 11a66566..7ae7b49f 100644
--- a/spec/compilers/property_without_default
+++ b/spec/compilers/property_without_default
@@ -12,17 +12,16 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
 export const
-  A = ({
+  B = ({
     a
   }) => {
-    return B(`div`, {})
+    return A(`div`, {})
   },
   C = () => {
-    return B(A, {
+    return A(B, {
       a: `HELLO`
     })
   };
-
diff --git a/spec/compilers/provider_with_items b/spec/compilers/provider_with_items
index 555f4e91..aab70b52 100644
--- a/spec/compilers/provider_with_items
+++ b/spec/compilers/provider_with_items
@@ -33,10 +33,10 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createProvider as C,
-  createElement as F,
+  createProvider as B,
+  createElement as D,
   signal as A,
-  useId as E
+  useId as C
 } from "./runtime.js";
 
 export const
@@ -49,16 +49,16 @@ export const
     return c.value
   },
   e = new Map(),
-  B = C(e, async () => {
+  E = B(e, async () => {
     return await null
   }),
-  D = () => {
-    const f = E();
-    B(f, () => {
+  F = () => {
+    const f = C();
+    E(f, () => {
       return {
         a: true,
         b: false
       }
     });
-    return F(`div`, {})
+    return D(`div`, {})
   };
diff --git a/spec/compilers/record b/spec/compilers/record
index fa3afe1d..e59d3a46 100644
--- a/spec/compilers/record
+++ b/spec/compilers/record
@@ -14,12 +14,12 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as B } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
-export const A = () => {
+export const B = () => {
   {
     a: `Hello`,
     b: 0
   };
-  return B(`div`, {})
+  return A(`div`, {})
 };
diff --git a/spec/compilers/record_update b/spec/compilers/record_update
index 69d73368..840e6202 100644
--- a/spec/compilers/record_update
+++ b/spec/compilers/record_update
@@ -12,17 +12,17 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as C,
-  useSignal as B
+  createElement as B,
+  useSignal as A
 } from "./runtime.js";
 
-export const A = () => {
-  const a = B({
+export const C = () => {
+  const a = A({
     name: `Doe`
   });
   {
     ...a.value,
     name: `John`
   };
-  return C(`div`, {})
+  return B(`div`, {})
 };
diff --git a/spec/compilers/signal b/spec/compilers/signal
index 5f0e660c..1905ad80 100644
--- a/spec/compilers/signal
+++ b/spec/compilers/signal
@@ -23,4 +23,3 @@ export const
   B = () => {
     return a.value
   };
-
diff --git a/spec/compilers/state b/spec/compilers/state
index d2d317b4..f49450da 100644
--- a/spec/compilers/state
+++ b/spec/compilers/state
@@ -11,15 +11,14 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { useSignal as B } from "./runtime.js";
+import { useSignal as A } from "./runtime.js";
 
-export const A = () => {
+export const B = () => {
   const
-    a = B(`Hello`),
-    b = B(`0`),
+    a = A(`Hello`),
+    b = A(`0`),
     c = () => {
       return a.value + b.value
     };
   return c()
 };
-
diff --git a/spec/compilers/state_setter b/spec/compilers/state_setter
index 97dc9493..9e6e1507 100644
--- a/spec/compilers/state_setter
+++ b/spec/compilers/state_setter
@@ -7,10 +7,10 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { useSignal as B } from "./runtime.js";
+import { useSignal as A } from "./runtime.js";
 
-export const A = () => {
-  const a = B(``);
+export const B = () => {
+  const a = A(``);
   (b) => {
     a.value = b
   }(`Hello`);
diff --git a/spec/compilers/store_with_get b/spec/compilers/store_with_get
index 0e707cd3..c5c3afdf 100644
--- a/spec/compilers/store_with_get
+++ b/spec/compilers/store_with_get
@@ -26,4 +26,3 @@ export const
     a.value;
     return b()
   };
-
diff --git a/spec/compilers/style_with_argument b/spec/compilers/style_with_argument
index 1ebb2875..eca99a48 100644
--- a/spec/compilers/style_with_argument
+++ b/spec/compilers/style_with_argument
@@ -16,19 +16,19 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as B,
-  style as C
+  createElement as A,
+  style as B
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   const a = (b) => {
     const _ = {
       [`--a-a`]: b
     };
     return _
   };
-  return B(`div`, {
+  return A(`div`, {
     className: `Main_test`,
-    style: C([a(`red`)])
+    style: B([a(`red`)])
   })
 };
diff --git a/spec/compilers/style_with_default_argument b/spec/compilers/style_with_default_argument
index 333ba2ce..601a86e8 100644
--- a/spec/compilers/style_with_default_argument
+++ b/spec/compilers/style_with_default_argument
@@ -16,19 +16,19 @@ component Main {
 
 ---=== /__mint__/index.js ===---
 import {
-  createElement as B,
-  style as C
+  createElement as A,
+  style as B
 } from "./runtime.js";
 
-export const A = () => {
+export const C = () => {
   const a = (b = `red`) => {
     const _ = {
       [`--a-a`]: b
     };
     return _
   };
-  return B(`div`, {
+  return A(`div`, {
     className: `Main_test`,
-    style: C([a()])
+    style: B([a()])
   })
 };
diff --git a/spec/compilers/type b/spec/compilers/type
index 884bdaef..6493fd6a 100644
--- a/spec/compilers/type
+++ b/spec/compilers/type
@@ -20,20 +20,20 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  newVariant as I,
-  variant as B
+  newVariant as B,
+  variant as A
 } from "./runtime.js";
 
 export const
-  A = B(1),
-  C = B(0),
-  D = B(0),
-  E = B(1),
-  F = B(1),
-  G = B(2),
-  H = () => {
-    new C();
-    I(G)(``, ``);
-    I(E)(I(F)(``));
+  C = A(1),
+  D = A(0),
+  E = A(0),
+  F = A(1),
+  G = A(1),
+  H = A(2),
+  I = () => {
+    new D();
+    B(H)(``, ``);
+    B(F)(B(G)(``));
     return ``
   };
diff --git a/spec/compilers/type_with_variants b/spec/compilers/type_with_variants
index 77e844b1..1f515ca9 100644
--- a/spec/compilers/type_with_variants
+++ b/spec/compilers/type_with_variants
@@ -13,32 +13,32 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  patternVariable as H,
-  newVariant as F,
-  pattern as G,
-  variant as B,
-  match as E
+  patternVariable as E,
+  newVariant as C,
+  pattern as D,
+  variant as A,
+  match as B
 } from "./runtime.js";
 
 export const
-  A = B([
+  F = A([
     "name",
     "age"
   ]),
-  C = B(0),
-  D = () => {
-    return E(F(A)(`Joe`, 32), [
+  G = A(0),
+  H = () => {
+    return B(C(F)(`Joe`, 32), [
       [
-        G(A, [
-          H,
-          H
+        D(F, [
+          E,
+          E
         ]),
         (a, b) => {
           return a
         }
       ],
       [
-        G(C, []),
+        D(G, []),
         () => {
           return ``
         }
diff --git a/spec/compilers/variable_component_property b/spec/compilers/variable_component_property
index 7ac6fcc3..2948f0ee 100644
--- a/spec/compilers/variable_component_property
+++ b/spec/compilers/variable_component_property
@@ -12,14 +12,14 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { createElement as C } from "./runtime.js";
+import { createElement as A } from "./runtime.js";
 
 export const
-  A = ({
+  B = ({
     a = `Hello`
   }) => {
     return a
   },
-  B = () => {
-    return C(A, {})
+  C = () => {
+    return A(B, {})
   };
diff --git a/spec/compilers_spec.cr b/spec/compilers_spec.cr
index 4d2285df..bf7dbfd1 100644
--- a/spec/compilers_spec.cr
+++ b/spec/compilers_spec.cr
@@ -20,6 +20,7 @@ Dir
         config =
           Mint::Bundler::Config.new(
             json: Mint::MintJson.parse("{}", "mint.json"),
+            generate_source_maps: false,
             generate_manifest: false,
             include_program: false,
             live_reload: false,
diff --git a/spec/utils/markd_vdom_renderer_spec.cr b/spec/utils/markd_vdom_renderer_spec.cr
index 2f1bb763..05b7a554 100644
--- a/spec/utils/markd_vdom_renderer_spec.cr
+++ b/spec/utils/markd_vdom_renderer_spec.cr
@@ -113,9 +113,10 @@ module Mint
 
             js_renderer =
               Renderer.new(
-                bundles: {} of Set(Ast::Node) | Bundle => Set(Ast::Node),
                 deferred_path: ->(_node : Set(Ast::Node) | Bundle) { "" },
+                bundles: {} of Set(Ast::Node) | Bundle => Set(Ast::Node),
                 asset_path: ->(_node : Ast::Node) { "" },
+                generate_source_maps: false,
                 class_pool: class_pool,
                 base: Bundle::Index,
                 pool: pool)
diff --git a/spec_cli/build_spec.cr b/spec_cli/build_spec.cr
index fda65522..7e1d2074 100644
--- a/spec_cli/build_spec.cr
+++ b/spec_cli/build_spec.cr
@@ -20,15 +20,16 @@ context "build" do
       Builds the project for production.
 
       Flags:
-        --env, -e            # Loads the given .env file.
-        --generate-manifest  # If specified, the web manifest will be generated.
-        --help               # Displays help for the current command.
-        --no-optimize        # If specified, the resulting JavaScript code will not be optimized.
-        --runtime            # If specified, the supplied runtime will be used instead of the default.
-        --skip-icons         # If specified, the application icons will not be generated.
-        --timings            # If specified, timings will be printed.
-        --verbose            # If specified, all written files will be logged.
-        --watch, -w          # If specified, will build on every change.
+        --env, -e               # Loads the given .env file.
+        --generate-manifest     # If specified, the web manifest will be generated.
+        --generate-source-maps  # If specified, source maps will be generated.
+        --help                  # Displays help for the current command.
+        --no-optimize           # If specified, the resulting JavaScript code will not be optimized.
+        --runtime               # If specified, the supplied runtime will be used instead of the default.
+        --skip-icons            # If specified, the application icons will not be generated.
+        --timings               # If specified, timings will be printed.
+        --verbose               # If specified, all written files will be logged.
+        --watch, -w             # If specified, will build on every change.
       TEXT
   end
 
diff --git a/spec_cli/start_spec.cr b/spec_cli/start_spec.cr
index fc7f5012..ec7b436c 100644
--- a/spec_cli/start_spec.cr
+++ b/spec_cli/start_spec.cr
@@ -22,6 +22,7 @@ context "test" do
       Flags:
         --env, -e                                            # Loads the given .env file.
         --format                                             # Formats the source files when they change.
+        --generate-source-maps                               # If specified, source maps will be generated.
         --help                                               # Displays help for the current command.
         --host, -h (default: ENV["HOST"]? || "0.0.0.0")      # The host to serve the application on.
         --no-reload                                          # Do not reload the browser when something changes.
diff --git a/spec_cli/test_spec.cr b/spec_cli/test_spec.cr
index 737484cb..aee92c7a 100644
--- a/spec_cli/test_spec.cr
+++ b/spec_cli/test_spec.cr
@@ -24,6 +24,7 @@ context "test" do
         --browser-host, -x (default: ENV["BROWSER_HOST"]? || "127.0.0.1")    # Target host, useful when hosted on another machine.
         --browser-port, -c (default: (ENV["BROWSER_PORT"]? || "3001").to_i)  # Target port, useful when hosted on another machine.
         --env, -e                                                            # Loads the given .env file.
+        --generate-source-maps                                               # If specified, source maps will be generated.
         --help                                                               # Displays help for the current command.
         --host, -h (default: ENV["HOST"]? || "127.0.0.1")                    # Host to serve the tests on.
         --manual, -m                                                         # Start the test server for manual testing.
diff --git a/src/bundler.cr b/src/bundler.cr
index 9803fdd8..803d30a8 100644
--- a/src/bundler.cr
+++ b/src/bundler.cr
@@ -7,6 +7,7 @@ module Mint
 
     record Config,
       test : NamedTuple(url: String, id: String, glob: String)?,
+      generate_source_maps : Bool,
       generate_manifest : Bool,
       include_program : Bool,
       runtime_path : String?,
@@ -93,10 +94,11 @@ module Mint
       ids =
         compiler.compiled.map { |(_, id, _)| id }
 
-      calculated_bundles = Logger.log "Calculating dependencies for bundles..." do
-        # Calculate the bundles.
-        artifacts.references.calculate
-      end
+      calculated_bundles =
+        Logger.log "Calculating dependencies for bundles..." do
+          # Calculate the bundles.
+          artifacts.references.calculate
+        end
 
       Logger.log "Bundling and generating JavaScript..." do
         # NOTE: For debugging purposes.
@@ -165,21 +167,22 @@ module Mint
                    Ast::Node |
                    String, Set(Ast::Node) | Bundle).new
 
-        rendered_bundles =
-          {} of Set(Ast::Node) | Bundle => Tuple(Compiler::Renderer, Array(String))
+        processed_bundles =
+          {} of Set(Ast::Node) | Bundle => Tuple(Compiler::Renderer, Array(Compiler::Compiled))
 
         # We render the bundles so we can know after what we need to import.
         bundles.each do |node, contents|
           renderer =
             Compiler::Renderer.new(
               deferred_path: ->bundle_name(Set(Ast::Node) | Bundle),
+              generate_source_maps: config.generate_source_maps,
               asset_path: ->asset_path(Ast::Node),
               bundles: calculated_bundles,
               class_pool: class_pool,
               base: node,
               pool: pool)
 
-          # Built the singe `const` with multiple assignments so we can add
+          # Build the single `const` with multiple assignments so we can add
           # things later to the array.
           items =
             if contents.empty?
@@ -210,95 +213,109 @@ module Mint
             items << compiler.program if config.include_program
           end
 
-          # Render the final JavaScript.
-          items =
-            items.reject(&.empty?).map { |item| renderer.render(item) }
-
-          rendered_bundles[node] = {renderer, items}
+          processed_bundles[node] = {renderer, items.reject(&.empty?)}
         end
 
-        rendered_bundles.each do |node, (renderer, items)|
-          case node
-          when Bundle::Index
-            # Index doesn't import from other nodes.
-          else
-            # This holds the imports for each other bundle.
-            imports =
-              {} of Set(Ast::Node) | Bundle => Hash(String, String)
-
-            renderer.used.map do |item|
-              # We only need to import things that are actually exported (all
-              # other entities show up here like function arguments, statement
-              # variables, etc...)
-              next unless ids.includes?(item)
-
-              # We don't import async components.
-              case item
-              when Ast::Id
-                next # NOTE: Don't know how this can be here...
-              when Ast::Component
-                next if item.async?
-              end
+        rendered_bundles =
+          processed_bundles.map do |node, (renderer, items)|
+            used =
+              compiler.gather_used(items)
+
+            case node
+            when Bundle::Index
+              # Index doesn't import from other nodes.
+            else
+              # This holds the imports for each other bundle.
+              imports =
+                {} of Set(Ast::Node) | Bundle => Hash(String, String)
+
+              used.map do |item|
+                # We only need to import things that are actually exported (all
+                # other entities show up here like function arguments, statement
+                # variables, etc...)
+                next unless ids.includes?(item)
+
+                # We don't import async components.
+                case item
+                when Ast::Id
+                  next # NOTE: Don't know how this can be here...
+                when Ast::Component
+                  next if item.async?
+                end
 
-              # Get where the entity should be.
-              target =
-                scopes[item]? || Bundle::Index
+                # Get where the entity should be.
+                target =
+                  scopes[item]? || Bundle::Index
 
-              # If the target is not this bundle and it's not the same bundle
-              # then we need to import.
-              if target != node && Set.new([item]) != node
-                exported_name =
-                  rendered_bundles[target][0].render(item).to_s
+                # If the target is not this bundle and it's not the same bundle
+                # then we need to import.
+                if target != node && Set.new([item]) != node
+                  exported_name =
+                    processed_bundles[target][0].render(item).to_s
 
-                imported_name =
-                  renderer.render(item).to_s
+                  imported_name =
+                    renderer.render(item).to_s
 
-                imports[target] ||= {} of String => String
-                imports[target][exported_name] = imported_name
+                  imports[target] ||= {} of String => String
+                  imports[target][exported_name] = imported_name
+                end
               end
-            end
 
-            # For each import we insert an import statement.
-            imports.each do |target, data|
-              items.unshift(
-                renderer.import(
-                  data,
-                  config.optimize,
-                  path_for_import(target)))
-            end
+              # For each import we insert an import statement.
+              imports.each do |target, data|
+                items.unshift(compiler.js.import(data, path_for_import(target)))
+              end
 
-            case node
-            in Bundle::Index
-            in Set(Ast::Node)
-              if node.size == 1
-                items << "export default #{renderer.render(node.first)}"
+              case node
+              in Bundle::Index
+              in Set(Ast::Node)
+                if node.size == 1
+                  items << ["export default ", node.first] of Compiler::Item
+                end
               end
             end
-          end
 
-          # Gather what builtins need to be imported and add it's statement
-          # as well.
-          builtins =
-            renderer
-              .builtins
-              .each_with_object({} of String => String) do |item, memo|
-                memo[item.to_s.camelcase(lower: true)] = renderer.class_pool.of(item, node)
+            # Gather what builtins need to be imported and add it's statement
+            # as well.
+            builtins =
+              used
+                .select(Compiler::Builtin)
+                .each_with_object({} of String => String) do |item, memo|
+                  memo[item.to_s.camelcase(lower: true)] = renderer.class_pool.of(item, node)
+                end
+
+            items
+              .unshift(compiler.js.import(builtins, "./runtime.js"))
+              .reject!(&.empty?)
+
+            path =
+              path_for_bundle(node)
+
+            js =
+              if items.empty?
+                ""
+              else
+                renderer.render(compiler.js.statements(items, line_count: 2)) + ";"
               end
 
-          items
-            .unshift(renderer.import(builtins, config.optimize, "./runtime.js"))
-            .reject!(&.blank?)
+            files[path] = ->{ js }
 
-          js =
-            if items.empty?
-              ""
-            elsif config.optimize
-              items.join(";")
-            else
-              items.join(";\n\n") + ";"
-            end
+            {renderer, path, js}
+          end
 
-          files[path_for_bundle(node)] = ->{ js }
+        if config.generate_source_maps
+          Logger.log "Generating source maps..." do
+            rendered_bundles.each do |(renderer, path, js)|
+              source_map_path =
+                "#{path}.map"
+
+              source_map =
+                SourceMapGenerator.new(renderer.mappings, js).generate
+
+              files[path] = ->{ "#{js}\n//# sourceMappingURL=#{File.basename(source_map_path)}" }
+              files[source_map_path] = ->{ source_map }
+            end
+          end
         end
       end
     end
diff --git a/src/commands/build.cr b/src/commands/build.cr
index 39635650..c184770b 100644
--- a/src/commands/build.cr
+++ b/src/commands/build.cr
@@ -20,6 +20,10 @@ module Mint
         description: "If specified, the web manifest will be generated.",
         default: false
 
+      define_flag generate_source_maps : Bool,
+        description: "If specified, source maps will be generated.",
+        default: false
+
       define_flag verbose : Bool,
         description: "If specified, all written files will be logged.",
         default: false
@@ -60,6 +64,7 @@ module Mint
                     Bundler.new(
                       artifacts: result.artifacts,
                       config: Bundler::Config.new(
+                        generate_source_maps: flags.generate_source_maps,
                         generate_manifest: flags.generate_manifest,
                         skip_icons: flags.skip_icons,
                         optimize: !flags.no_optimize,
diff --git a/src/commands/start.cr b/src/commands/start.cr
index 15d48f33..de64937f 100644
--- a/src/commands/start.cr
+++ b/src/commands/start.cr
@@ -12,6 +12,10 @@ module Mint
         description: "Do not reload the browser when something changes.",
         default: false
 
+      define_flag generate_source_maps : Bool,
+        description: "If specified, source maps will be generated.",
+        default: false
+
       define_flag format : Bool,
         description: "Formats the source files when they change.",
         default: false
@@ -43,6 +47,7 @@ module Mint
             Bundler.new(
               artifacts: type_checker.artifacts,
               config: Bundler::Config.new(
+                generate_source_maps: flags.generate_source_maps,
                 live_reload: !flags.no_reload,
                 runtime_path: flags.runtime,
                 generate_manifest: false,
diff --git a/src/commands/test.cr b/src/commands/test.cr
index b805eebe..f081e430 100644
--- a/src/commands/test.cr
+++ b/src/commands/test.cr
@@ -23,6 +23,10 @@ module Mint
         default: (ENV["BROWSER_PORT"]? || "3001").to_i,
         short: "c"
 
+      define_flag generate_source_maps : Bool,
+        description: "If specified, source maps will be generated.",
+        default: false
+
       define_flag reporter : String,
         description: "Which reporter to use (dot, documentation),",
         default: "dot",
diff --git a/src/compiler.cr b/src/compiler.cr
index 05074729..22d7ba32 100644
--- a/src/compiler.cr
+++ b/src/compiler.cr
@@ -6,7 +6,7 @@ module Mint
     # Represents a compiled item
     alias Item = Ast::Node | Builtin | String | Signal | Indent | Raw |
                  Variable | Ref | Encoder | Decoder | Asset | Deferred |
-                 Function | Await
+                 Function | Await | SourceMapped
 
     # Represents an generated idetifier from the parts of the union type.
     alias Id = Ast::Node | Variable | Encoder | Decoder
@@ -14,6 +14,9 @@ module Mint
     # Represents compiled code.
     alias Compiled = Array(Item)
 
+    # Represents entites which are used in a program.
+    alias Used = Set(Ast::Node | Encoder | Decoder | Builtin)
+
     # Represents an reference to a deferred file
     record Deferred, value : Ast::Node
 
@@ -28,6 +31,9 @@ module Mint
     # because they have a `.current` accessor.
     record Ref, value : Ast::Node
 
+    # A node for tracking source mappings.
+    record SourceMapped, value : Compiled, node : Ast::Node
+
     # Represents a function.
     record Function, value : Compiled
 
@@ -200,7 +206,9 @@ module Mint
       if touched.includes?(node) || !node.in?(artifacts.checked)
         [] of Item
       else
-        yield.tap { touched.add(node) }
+        ([SourceMapped.new(node: node, value: yield)] of Item).tap do
+          touched.add(node)
+        end
       end
     end
 
@@ -310,6 +318,7 @@ module Mint
       end
     end
 
+    # Semantic tokenizes the given AST.
     def tokenize(ast : Ast) : Compiled
       mapped =
         SemanticTokenizer
@@ -354,6 +363,34 @@ module Mint
       end || compiled
     end
 
+    def gather_used(items : Array(Compiled))
+      Used.new.tap { |used| items.each { |item| gather_used(item, used) } }
+    end
+
+    def gather_used(items : Compiled, used : Used)
+      items.each { |item| gather_used(item, used) }
+    end
+
+    def gather_used(item : Item, used : Used)
+      case item
+      in Variable, Deferred, String, Asset, Await, Ref, Raw
+      in SourceMapped
+        gather_used(item.value, used)
+      in Function
+        gather_used(item.value, used)
+      in Indent
+        gather_used(item.items, used)
+      in Signal
+        used.add(item.value)
+      in Encoder, Decoder
+        used.add(item)
+      in Ast::Node
+        used.add(item)
+      in Builtin
+        used.add(item)
+      end
+    end
+
     # These functions are for looking up entities that the runtime uses
     # (Just, Nothing, Err, Ok, Main).
 
diff --git a/src/compiler/js.cr b/src/compiler/js.cr
index 019683d1..49ebab2a 100644
--- a/src/compiler/js.cr
+++ b/src/compiler/js.cr
@@ -8,6 +8,25 @@ module Mint
       def initialize(@optimize)
       end
 
+      # Renders an import statement.
+      def import(imports : Hash(String, String), path : String) : Compiled
+        return [] of Item if imports.empty?
+
+        items =
+          imports
+            .map { |(key, value)| key == value ? key : "#{key} as #{value}" }
+            .sort_by!(&.size).reverse!
+            .map { |value| [value] of Item }
+
+        if optimize?
+          ["import "] + block(join(items, ",")) + [%( from "#{path}")]
+        elsif items.size == 1
+          ["import { "] + join(items, ",") + [%( } from "#{path}")]
+        else
+          ["import ", Indent.new(["{\n"] + join(items, ",\n")), %(\n} from "#{path}")] of Item
+        end
+      end
+
       # Renders an object. The key can be any item but it's usually a string
       # or an identifier.
       def object(items : Hash(Item, Compiled)) : Compiled
@@ -64,8 +83,8 @@ module Mint
       end
 
       # Renders statements.
-      def statements(items : Array(Compiled)) : Compiled
-        join(items.reject(&.empty?), optimize? ? ";" : ";\n")
+      def statements(items : Array(Compiled), *, line_count = 1) : Compiled
+        join(items.reject(&.empty?), optimize? ? ";" : ";" + "\n" * line_count)
       end
 
       # Renders a const assignment.
@@ -247,6 +266,8 @@ module Mint
           true
         when Indent
           async?(item.items)
+        when SourceMapped
+          async?(item.value)
         else
           false
         end
diff --git a/src/compiler/renderer.cr b/src/compiler/renderer.cr
index d4e9daed..b1f1762c 100644
--- a/src/compiler/renderer.cr
+++ b/src/compiler/renderer.cr
@@ -14,23 +14,37 @@ module Mint
       # A method to get the deffered path of a bundle.
       getter deferred_path : Proc(Set(Ast::Node) | Bundle, String)
 
-      # A set to track nodes which we rendered.
-      getter used = Set(Ast::Node | Encoder | Decoder).new
-
       # A method to get the path of an asset.
       getter asset_path : Proc(Ast::Node, String)
 
-      # A set to track used builtins which will be imported.
-      getter builtins = Set(Builtin).new
-
       # The current bundle.
       getter base : Set(Ast::Node) | Bundle
 
+      # Whether or not to generate source map mappings.
+      getter? generate_source_maps : Bool
+
+      # The last line index.
+      property last_line : Int32 = 0
+
+      # The current column.
+      property column : Int32 = 0
+
       # The current indentation depth.
       property depth : Int32 = 0
 
+      # The current line.
+      property line : Int32 = 0
+
+      alias Mapping = Tuple(Ast::Node | Nil, Tuple(Int32, Int32), String | Nil)
+
+      # A mapping and stack for generating source maps. We use `Deque` because
+      # we push and pop to the stack frequently.
+      property stack : Deque(Ast::Node) = Deque(Ast::Node).new
+      property mappings : Deque(Mapping) = Deque(Mapping).new
+
       def initialize(
         *,
+        @generate_source_maps,
         @deferred_path,
         @class_pool,
         @asset_path,
@@ -40,27 +54,6 @@ module Mint
       )
       end
 
-      def import(imports : Hash(String, String), optimize : Bool, path : String)
-        return "" if imports.empty?
-
-        items =
-          imports
-            .map do |(key, value)|
-              if key == value
-                key
-              else
-                "#{key} as #{value}"
-              end
-            end
-            .sort_by!(&.size).reverse!
-
-        if items.size > 1 && !optimize
-          %(import {\n#{items.join(",\n").indent}\n} from "#{path}")
-        else
-          %(import { #{items.join(",")} } from "#{path}")
-        end
-      end
-
       def render(items : Compiled) : String
         String.build do |io|
           render(items, io)
@@ -73,21 +66,64 @@ module Mint
         end
       end
 
+      def append(io : IO, value : String | Char)
+        case value
+        in Char
+          io << value
+
+          if generate_source_maps?
+            last_mapping = mappings.last?.try(&.first)
+            last_node = stack.last?
+
+            if (last_mapping != last_node || last_line != line) && last_node
+              name =
+                case last_node
+                when Ast::Argument,
+                     Ast::Function,
+                     Ast::Property,
+                     Ast::Signal,
+                     Ast::State,
+                     Ast::Get
+                  last_node.name.value
+                when Ast::Variable
+                  last_node.value
+                end
+
+              mappings << {last_node, {line, column}, name}
+              self.last_line = line
+            end
+
+            case value
+            when '\n'
+              self.column = 0
+              self.line += 1
+            else
+              self.column += 1
+            end
+          end
+        in String
+          value.each_char do |char|
+            append(io, char)
+          end
+        end
+      end
+
       # We are using a string builder to build the final compiled code.
       def render(item : Item, io : IO = IO::Memory.new)
         case item
+        in SourceMapped
+          @stack.push(item.node)
+          render(item.value, io).tap { @stack.pop }
         in Await
-          io << "await"
+          append(io, "await")
         in Function
           render(item.value, io)
         in Signal
-          used.add(item.value)
-
           # Signals are special becuse we need to use the `.value` accessor.
-          io << "#{pool.of(item.value, base)}.value"
+          append(io, "#{pool.of(item.value, base)}.value")
         in Ref
           # Refs are special becuse we need to use the `.current` accessor.
-          io << "#{pool.of(item.value, base)}.current"
+          append(io, "#{pool.of(item.value, base)}.current")
         in Ast::Node
           scope =
             case item
@@ -95,48 +131,44 @@ module Mint
               bundles.find(&.last.includes?(item)).try(&.first)
             end || base
 
-          used.add(item)
-
           # Nodes are compiled into variables.
           case item
           when Ast::TypeVariant,
                Ast::Component,
                Ast::Provider
-            io << class_pool.of(item, scope)
+            append(io, class_pool.of(item, scope))
           else
-            io << pool.of(item, scope)
+            append(io, pool.of(item, scope))
           end
         in Encoder, Decoder
-          used.add(item)
-
-          io << pool.of(item, base)
+          append(io, pool.of(item, base))
         in Variable
-          io << pool.of(item, base)
+          append(io, pool.of(item, base))
         in Builtin
-          builtins.add(item)
-
-          io << class_pool.of(item, base)
+          append(io, class_pool.of(item, base))
         in Raw
-          io << item.value
+          append(io, item.value)
         in String
           # Only strings need to be indented, and we copy everything and when
           # there is a new line we add the indentation after.
           item.each_char do |char|
-            io << char
-            io << (" " * depth * 2) if char == '\n'
+            append(io, char)
+            append(io, (" " * depth * 2)) if char == '\n'
           end
         in Deferred
           bundle =
             bundles.find!(&.last.includes?(item.value)).first
 
-          io << "`./#{deferred_path.call(bundle)}`"
+          append(io, "`./#{deferred_path.call(bundle)}`")
         in Asset
-          io << "`#{asset_path.call(item.value)}`"
+          append(io, "`#{asset_path.call(item.value)}`")
         in Indent
           self.depth += 1
           render(item.items, io)
           self.depth -= 1
         end
+
+        io
       end
     end
   end
diff --git a/src/compilers/component.cr b/src/compilers/component.cr
index 0cfff6eb..8f1a8184 100644
--- a/src/compilers/component.cr
+++ b/src/compilers/component.cr
@@ -149,8 +149,8 @@ module Mint
         effect =
           if mount || unmount
             body = [] of Compiled
-            body << ["("] + compile(mount, skip_const: true) + [")()"] if mount
-            body << js.return(compile(unmount, skip_const: true)) if unmount
+            body << ["("] + compile_function(mount, skip_const: true) + [")()"] if mount
+            body << js.return(compile_function(unmount, skip_const: true)) if unmount
 
             [
               js.call(Builtin::UseEffect, [
@@ -166,7 +166,7 @@ module Mint
           if did_update
             [
               js.call(Builtin::UseDidUpdate, [
-                compile(did_update, skip_const: true),
+                compile_function(did_update, skip_const: true),
               ]),
             ]
           else
@@ -178,7 +178,7 @@ module Mint
             refs + states + gets + functions + styles + constants + id + [
               {node,
                node,
-               compile(
+               compile_function(
                  render.not_nil!,
                  skip_const: true,
                  contents: js.statements(
@@ -198,7 +198,7 @@ module Mint
             [{
               node,
               node,
-              compile(
+              compile_function(
                 render.not_nil!,
                 args: arguments,
                 skip_const: true,
diff --git a/src/compilers/function.cr b/src/compilers/function.cr
index 95d15e5a..09509191 100644
--- a/src/compilers/function.cr
+++ b/src/compilers/function.cr
@@ -2,17 +2,17 @@ module Mint
   class Compiler
     def resolve(node : Ast::Function)
       resolve node do
-        {node, node, compile(node, contents: nil, args: nil, skip_const: true)}
+        {node, node, compile_function(node, contents: nil, args: nil, skip_const: true)}
       end
     end
 
-    def compile(node : Ast::Function)
+    def compile_function(node : Ast::Function)
       compile node do
         compile(node, contents: nil, args: nil)
       end
     end
 
-    def compile(
+    def compile_function(
       node : Ast::Function, *,
       contents : Compiled | Nil = nil,
       args : Array(Compiled) | Nil = nil,
@@ -28,7 +28,11 @@ module Mint
       items << compile(node.body, for_function: true)
 
       body =
-        js.arrow_function(arguments) { js.statements(items) }
+        [
+          SourceMapped.new(
+            value: js.arrow_function(arguments) { js.statements(items) },
+            node: node),
+        ] of Item
 
       if skip_const
         body
diff --git a/src/compilers/provider.cr b/src/compilers/provider.cr
index 00c58861..3e6fb9e3 100644
--- a/src/compilers/provider.cr
+++ b/src/compilers/provider.cr
@@ -26,7 +26,7 @@ module Mint
             node,
             js.call(Builtin::CreateProvider, [
               [node.subscription] of Item,
-              compile(update, skip_const: true),
+              compile_function(update, skip_const: true),
             ]),
           }
 
diff --git a/src/compilers/string_literal.cr b/src/compilers/string_literal.cr
index b5dfbe4d..0195ef64 100644
--- a/src/compilers/string_literal.cr
+++ b/src/compilers/string_literal.cr
@@ -1,26 +1,28 @@
 module Mint
   class Compiler
     def compile(node : Ast::StringLiteral, quote : Bool = false) : Compiled
-      value =
-        node.value.flat_map do |item|
-          case item
-          in Ast::Node
-            ["${"] + compile(item) + ["}"]
-          in String
-            [
-              item
-                .gsub('`', "\\`")
-                .gsub("${", "\\${")
-                .gsub("\\\"", "\"")
-                .gsub("\\\#{", "\#{"),
-            ]
+      compile node do
+        value =
+          node.value.flat_map do |item|
+            case item
+            in Ast::Node
+              ["${"] + compile(item) + ["}"]
+            in String
+              [
+                item
+                  .gsub('`', "\\`")
+                  .gsub("${", "\\${")
+                  .gsub("\\\"", "\"")
+                  .gsub("\\\#{", "\#{"),
+              ]
+            end
           end
-        end
 
-      if quote
-        [%(`")] + value + [%("`)]
-      else
-        ["`"] + value + ["`"]
+        if quote
+          [%(`")] + value + [%("`)]
+        else
+          ["`"] + value + ["`"]
+        end
       end
     end
   end
diff --git a/src/ls/sandbox.cr b/src/ls/sandbox.cr
index 9d2d24c1..bd8d2760 100644
--- a/src/ls/sandbox.cr
+++ b/src/ls/sandbox.cr
@@ -56,6 +56,7 @@ module Mint
             Bundler.new(
               artifacts: result.artifacts,
               config: Bundler::Config.new(
+                generate_source_maps: true,
                 generate_manifest: false,
                 include_program: true,
                 hash_assets: false,
diff --git a/src/test_runner.cr b/src/test_runner.cr
index 64e3cd51..c4517fc2 100644
--- a/src/test_runner.cr
+++ b/src/test_runner.cr
@@ -34,6 +34,7 @@ module Mint
               Bundler.new(
                 artifacts: result.artifacts,
                 config: Bundler::Config.new(
+                  generate_source_maps: flags.generate_source_maps,
                   runtime_path: flags.runtime,
                   generate_manifest: false,
                   include_program: false,
diff --git a/src/utils/source_map_generator.cr b/src/utils/source_map_generator.cr
new file mode 100644
index 00000000..f77eca27
--- /dev/null
+++ b/src/utils/source_map_generator.cr
@@ -0,0 +1,107 @@
+module Mint
+  # This class is responsible for generating a source map.
+  class SourceMapGenerator
+    alias Mapping = Tuple(Ast::Node | Nil, Tuple(Int32, Int32), String | Nil)
+
+    # The line mappings.
+    getter mappings = {} of Int32 => Array(Mapping)
+
+    # The actual content of the sources.
+    getter sources_content = [] of String
+
+    # The source names for the mappings.
+    getter source_names = [] of String
+
+    # The filenames of the sources.
+    getter sources = [] of String
+
+    # The generate JavaScript file.
+    getter generated : String
+
+    def initialize(unsorted : Deque(Mapping), @generated)
+      # We sort the mappings into lines.
+      unsorted.each do |item|
+        (mappings[item[1][0]] ||= [] of Mapping) << item
+      end
+    end
+
+    def get_source_index(file)
+      sources.index(file.path) || begin
+        sources_content << file.contents
+        sources << file.path
+        sources.size - 1
+      end
+    end
+
+    def get_source_name_index(value)
+      source_names.index(value) || begin
+        source_names << value
+        source_names.size - 1
+      end
+    end
+
+    def generate : String
+      last_name_index = 0
+      last_column = 0
+      last_index = 0
+      last_line = 0
+
+      generated_mappings =
+        (0..generated.lines.size).map do |line_index|
+          next "" unless items = mappings[line_index]?
+
+          items.reduce({[] of String, 0}) do |(memo, last), item|
+            column =
+              item[1][1]
+
+            segment =
+              VLQ.encode(column - last)
+
+            if node = item[0]
+              # TODO: After the refactor of location remove
+              #       this temporary variable.
+              location =
+                node.location
+
+              source_line =
+                location.start[0] - 1
+
+              source_column =
+                location.start[1]
+
+              source_index =
+                get_source_index(node.file)
+
+              # The order is significant.
+              segment += VLQ.encode(source_index - last_index)
+              segment += VLQ.encode(source_line - last_line)
+              segment += VLQ.encode(source_column - last_column)
+
+              if name = item[2]
+                source_name_index =
+                  get_source_name_index(name)
+
+                segment += VLQ.encode(source_name_index - last_name_index)
+                last_name_index = source_name_index
+              end
+
+              last_column = source_column
+              last_index = source_index
+              last_line = source_line
+            end
+
+            memo << segment
+            {memo, column}
+          end.first.join(",")
+        end.join(";")
+
+      {
+        mappings:       generated_mappings,
+        sourcesContent: sources_content,
+        names:          source_names,
+        sources:        sources,
+        version:        3,
+      }.to_json
+    end
+  end
+end
diff --git a/src/utils/vlq.cr b/src/utils/vlq.cr
new file mode 100644
index 00000000..120903b7
--- /dev/null
+++ b/src/utils/vlq.cr
@@ -0,0 +1,66 @@
+module Mint
+  # Support for encoding the variable length quantity format.
+  #
+  # This implementation is heavily based on https://github.com/mozilla/source-map
+  # Copyright 2009-2011, Mozilla Foundation and contributors, BSD
+  #
+  module VLQ
+    # A single base 64 digit can contain 6 bits of data. For the base 64
+    # variable length quantities we use in the source map spec, the first bit
+    # is the sign, the next four bits are the actual value, and the 6th bit is
+    # the continuation bit. The continuation bit tells us whether there are
+    # more digits in this value following this digit.
+    #
+    #   Continuation
+    #   |    Sign
+    #   |    |
+    #   V    V
+    #   101011
+    VLQ_BASE_SHIFT = 5
+
+    # binary: 100000
+    VLQ_BASE = 1 << VLQ_BASE_SHIFT
+
+    # binary: 011111
+    VLQ_BASE_MASK = VLQ_BASE - 1
+
+    # binary: 100000
+    VLQ_CONTINUATION_BIT = VLQ_BASE
+
+    BASE64_DIGITS =
+      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".chars
+
+    # Returns the base 64 VLQ encoded value.
+    def self.encode(int)
+      vlq = to_vlq_signed(int)
+      encoded = ""
+      cond = true
+
+      while cond
+        digit = vlq & VLQ_BASE_MASK
+        vlq >>= VLQ_BASE_SHIFT
+        digit |= VLQ_CONTINUATION_BIT if vlq > 0
+        encoded += base64_encode(digit)
+        cond = vlq > 0
+      end
+
+      encoded
+    end
+
+    private def self.base64_encode(int)
+      BASE64_DIGITS[int]? || raise ArgumentError.new "#{int} is not a valid base64 digit"
+    end
+
+    # Converts from a two's-complement integer to an integer where the
+    # sign bit is placed in the least significant bit. For example, as decimals:
+    #  1 becomes 2 (10 binary), -1 becomes 3 (11 binary)
+    #  2 becomes 4 (100 binary), -2 becomes 5 (101 binary)
+    private def self.to_vlq_signed(int)
+      if int < 0
+        ((-int) << 1) + 1
+      else
+        int << 1
+      end
+    end
+  end
+end