css and js util fns

package.json

@@ -1,8 +1,11 @@
 {
   "name": "hype",
   "module": "src/index.tsx",
-  "exports": "./src/index.tsx",
   "type": "module",
+  "exports": {
+    ".": "./src/index.tsx",
+    "./utils": "./src/utils.tsx"
+  },
   "devDependencies": {
     "@types/bun": "latest"
   },

src/utils.tsx

@@ -1,6 +1,20 @@
 import { type Context } from 'hono'
 import { stat } from 'fs/promises'
 
+// template literal tag for inline CSS. returns a <style> tag
+export function css(strings: TemplateStringsArray, ...values: any[]) {
+  return <style dangerouslySetInnerHTML={{
+    __html: String.raw({ raw: strings }, ...values)
+  }} />
+}
+
+// template literal tag for inline JS. transpiles and returns a <script> tag
+export function js(strings: TemplateStringsArray, ...values: any[]) {
+  return <script dangerouslySetInnerHTML={{
+    __html: transpiler.transformSync(String.raw({ raw: strings }, ...values))
+  }} />
+}
+
 // lighten a hex color by blending with white. opacity 1 = original, 0 = white
 export function lightenColor(hex: string, opacity: number): string {
   // Remove # if present
@@ -51,6 +65,13 @@ export function randomId(): string {
   return Math.random().toString(36).slice(7)
 }
 
+// times(3) returns [1, 2, 3]
+export function times(n: number): number[] {
+  let out = [], i = 1
+  while (i <= n) out.push(i++)
+  return out
+}
+
 // inclusive
 // rand(2) == flip a coin
 // rand(6) == roll a die