@alstar/studio 0.0.0-beta.15 → 0.0.0-beta.18

package/queries/block.ts

@@ -2,97 +2,69 @@ import { db } from '@alstar/db'
 import { sql } from '../utils/sql.ts'
 import { type DBBlockResult } from '../types.ts'
 
-function buildForest(blocks: DBBlockResult[]): DBBlockResult[] {
-  const map = new Map<number, DBBlockResult>()
-  const roots: DBBlockResult[] = []
-
-  for (const block of blocks) {
-    block.children = []
-    map.set(block.id, block)
-  }
-
-  for (const block of blocks) {
-    if (block.parent_id === null) {
-      roots.push(block)
-    } else {
-      const parent = map.get(block.parent_id)
-      if (parent) parent.children!.push(block)
-    }
-  }
-
-  // Sort children by sort_order recursively
-  const sortChildren = (node: DBBlockResult) => {
-    node.children!.sort((a, b) => a.sort_order - b.sort_order)
-    node.children!.forEach(sortChildren)
-  }
-  roots.forEach(sortChildren)
-
-  return roots
-}
-
-function buildTree(blocks: DBBlockResult[]): DBBlockResult {
-  const map = new Map<number, DBBlockResult>()
-  const roots: DBBlockResult[] = []
-
-  for (const block of blocks) {
-    block.children = []
-    map.set(block.id, block)
-  }
-
-  for (const block of blocks) {
-    if (block.parent_id === null) {
-      roots.push(block)
-    } else {
-      const parent = map.get(block.parent_id)
-      if (parent) parent.children!.push(block)
-    }
-  }
-
-  // Sort children by sort_order recursively
-  const sortChildren = (node: DBBlockResult) => {
-    node.children!.sort((a, b) => a.sort_order - b.sort_order)
-    node.children!.forEach(sortChildren)
-  }
-  roots.forEach(sortChildren)
-
-  return roots[0]
-}
-
-function transformBlocksTree(
-  block: DBBlockResult,
-  isBlocksChild?: boolean,
-): DBBlockResult {
-  const fields: Record<string, DBBlockResult> = {}
-  let hasFields = false
-
-  for (const child of block.children ?? []) {
-    const transformedChild = transformBlocksTree(
-      child,
-      child.type === 'blocks',
-    )
-
-    if (!isBlocksChild) {
-      hasFields = true
-      fields[transformedChild.name] = transformedChild
-    }
-  }
-
-  if(hasFields) {
-    block.fields = fields
-  }
+// function buildForest(blocks: DBBlockResult[]): DBBlockResult[] {
+//   const map = new Map<number, DBBlockResult>()
+//   const roots: DBBlockResult[] = []
+
+//   for (const block of blocks) {
+//     block.blocks = []
+//     map.set(block.id, block)
+//   }
+
+//   for (const block of blocks) {
+//     if (block.parent_id === null) {
+//       roots.push(block)
+//     } else {
+//       const parent = map.get(block.parent_id)
+//       if (parent) parent.blocks!.push(block)
+//     }
+//   }
+
+//   // Sort blocks by sort_order recursively
+//   const sortChildren = (node: DBBlockResult) => {
+//     node.blocks!.sort((a, b) => a.sort_order - b.sort_order)
+//     node.blocks!.forEach(sortChildren)
+//   }
+//   roots.forEach(sortChildren)
+
+//   return roots
+// }
+
+// function transformBlocksTree(
+//   block: DBBlockResult,
+//   isBlocksChild?: boolean,
+// ): DBBlockResult {
+//   const fields: Record<string, DBBlockResult> = {}
+//   let hasFields = false
+
+//   for (const child of block.blocks ?? []) {
+//     const transformedChild = transformBlocksTree(
+//       child,
+//       child.type === 'blocks',
+//     )
+
+//     if (!isBlocksChild) {
+//       hasFields = true
+//       fields[transformedChild.name] = transformedChild
+//     }
+//   }
+
+//   if(hasFields) {
+//     block.fields = fields
+//   }
   
-  if (!isBlocksChild) {
-    delete block.children
-  } else {
-    delete block.fields
-  }
+//   if (!isBlocksChild) {
+//     delete block.blocks
+//   } else {
+//     delete block.fields
+//   }
 
-  return block
-}
+//   return block
+// }
 
-function transformForest(blocks: DBBlockResult[]): DBBlockResult[] {
-  return blocks.map((block) => transformBlocksTree(block))
-}
+// function transformForest(blocks: DBBlockResult[]): DBBlockResult[] {
+//   return blocks.map((block) => transformBlocksTree(block))
+// }
 
 function rootQuery(filterSql: string, depthLimit?: number) {
   const depthLimitClause =
@@ -218,24 +190,72 @@ function buildFilterSql(params: Record<string, any>) {
   return { filterSql, sqlParams }
 }
 
-export function roots(
-  params: Record<string, any>,
-  options?: {
-    depth?: number
-  },
-): DBBlockResult[] | [] {
-  const { filterSql, sqlParams } = buildFilterSql(params)
+// export function roots(
+//   params: Record<string, any>,
+//   options?: {
+//     depth?: number
+//   },
+// ): DBBlockResult[] | [] {
+//   const { filterSql, sqlParams } = buildFilterSql(params)
+
+//   const query = rootQuery(filterSql, options?.depth)
+//   const rows = db.database
+//     .prepare(query)
+//     .all(sqlParams) as unknown as DBBlockResult[]
+
+//   if (!rows.length) return []
+
+//   const forest = buildForest(rows)
+
+//   return transformForest(forest)
+// }
+
+type DBRow = {
+  id: number
+  created_at: string
+  updated_at: string
+  name: string
+  label: string
+  type: string
+  sort_order: number
+  value: string | null
+  options: string | null
+  status: 'enabled' | 'disabled'
+  parent_id: number | null
+  depth: number
+}
 
-  const query = rootQuery(filterSql, options?.depth)
-  const rows = db.database
-    .prepare(query)
-    .all(sqlParams) as unknown as DBBlockResult[]
+type TODO = any
+
+function buildTree2(items: DBRow[]): TODO | null {
+  const map = new Map<number, TODO>();
 
-  if (!rows.length) return []
+  // First pass: clone items into map
+  for (const item of items) {
+    map.set(item.id, { ...item });
+  }
 
-  const forest = buildForest(rows)
+  let root: TODO | null = null;
 
-  return transformForest(forest)
+  // Second pass: assign blocks to parents
+  for (const item of map.values()) {
+    if (item.parent_id === null) {
+      root = item; // Root node
+    } else {
+      const parent = map.get(item.parent_id);
+      if (parent) {
+        if(parent.type === 'blocks') {
+          if (!parent.blocks) parent.blocks = [];
+          parent.blocks.push(item);
+        } else {
+          if (!parent.fields) parent.fields = {};
+          parent.fields[item.name] = item;
+        }
+      }
+    }
+  }
+
+  return root;
 }
 
 export function root(
@@ -247,13 +267,15 @@ export function root(
   const query = rootQuery(filterSql, options?.depth)
   const rows = db.database
     .prepare(query)
-    .all(sqlParams) as unknown as DBBlockResult[]
+    .all(sqlParams) as unknown as DBRow[]
 
   if (!rows.length) return null
 
-  const tree = buildTree(rows)
+  // const tree = buildTree(rows)
+
+  const tree = buildTree2(rows)
 
-  return transformBlocksTree(tree)
+  return tree // transformBlocksTree(tree)
 }
 
 export function block(params: Record<string, any>) {

package/queries/index.ts

@@ -1,2 +1,3 @@
-export * as query from './block-2.ts'
-export { getBlockTrees } from './getBlockTrees.ts'
+export * as query from './block.ts'
+export { getBlockTrees } from './getBlockTrees.ts'
+export { blockWithChildren } from './block-with-children.ts'

package/schemas.ts

@@ -16,7 +16,7 @@ export const blocksTable = {
   columns: sql`
     name TEXT not null,
     label TEXT not null,
-    type TEXT not null,
+    type TEXT,
     value TEXT,
     options JSON,
     status TEXT default 'enabled',

package/types.ts

@@ -7,51 +7,20 @@ import {
   BlockInstance,
   FieldInstance,
 } from './utils/define.ts'
+import { type HtmlEscapedString } from 'hono/utils/html'
 
-// DeepReadonly utility type
-export type DeepReadonly<T> =
-  T extends (...args: any[]) => any   // functions stay as-is
-    ? T
-    : T extends any[]        // arrays/tuples
-      ? { [K in keyof T]: DeepReadonly<T[K]> }
-      : T extends object              // objects
-        ? { [K in keyof T]: DeepReadonly<T[K]> }
-        : T;                          // primitives
-
-export type PrimitiveField = {
-  name: string
-  label: string
-  type: 'text' | 'slug' | 'markdown' | 'image'
-}
-
-export type BlockField = {
-  name: string
-  label: string
-  type: 'blocks'
-  children: Record<string, Field | Block>
-}
-
-export type Field = PrimitiveField | BlockField
-
-export type Block = {
-  name: string
-  label: string
-  type: string
-  fields: Record<string, Field | Block>
-}
-
-export type Structure = Record<string, BlockDefStructure>
-// export type Structure = Record<string, BlockDefStructure>
+export type BlockStatus = 'enabled' | 'disabled'
 
-// --- Field & block definitions ---
-type FieldType = 'text' | 'slug' | 'markdown' | 'image'
+type FieldType = 'text' | 'slug' | 'markdown' | 'image' | 'reference'
 
 interface BaseField {
   label: string
   type: FieldType
   description?: string
+  presentation?: 'svg'
 }
 
+// text fields
 interface TextField extends BaseField {
   type: 'text' | 'slug' | 'markdown'
 }
@@ -60,6 +29,7 @@ interface TextFieldStructure extends TextField {
   instanceOf: typeof FieldInstance
 }
 
+// image field
 interface ImageField extends BaseField {
   type: 'image'
 }
@@ -68,46 +38,49 @@ interface ImageFieldStructure extends ImageField {
   instanceOf: typeof FieldInstance
 }
 
+// reference fields
+interface ReferenceField extends BaseField {
+  type: 'reference'
+  to: string | string[]
+}
+
+export interface ReferenceFieldStructure extends ReferenceField {
+  instanceOf: typeof FieldInstance
+}
+
+export type FieldDef = TextField | ImageField | ReferenceField
+export type FieldDefStructure = TextFieldStructure | ImageFieldStructure | ReferenceFieldStructure
+
+// blocks fields
 export interface BlocksFieldDef {
   label: string
-  type: 'blocks'
   description?: string
-  children: Record<string, BlockDefStructure | FieldDefStructure>
+  blocks: Record<string, BlockDefStructure | FieldDefStructure>
 }
 
 export interface BlocksFieldDefStructure extends BlocksFieldDef {
   instanceOf: typeof BlockFieldInstance
 }
 
-export type FieldDef = TextField | ImageField
-export type FieldDefStructure = TextFieldStructure | ImageFieldStructure
+export type BlockFields = Record<string, FieldDefStructure | BlocksFieldDefStructure>
 
-export interface BlockDef {
-  label: string
+// block
+export type BlockDef<T extends BlockFields> = {
   type: string
-  fields: Record<string, FieldDefStructure | BlocksFieldDefStructure>
+  label: string
   description?: string
+  preview?: {
+    field: keyof T
+  } | {
+    slug: string
+  },
+  fields: T,
 }
 
-export interface BlockDefStructure extends BlockDef {
+export type BlockDefStructure = BlockDef<BlockFields> & {
   instanceOf: typeof BlockInstance
 }
 
-// type DBDefaults = {
-//   id: number
-//   created_at: string
-//   updated_at: string
-//   name: string
-//   label: string
-//   // type: string
-//   sort_order: number
-//   value: string
-//   options: string | null
-//   status: 'enabled' | 'disabled'
-//   parent_id: number | null
-//   depth: number
-// }
-
 type BaseDBResult = {
   id: number
   created_at: string
@@ -117,7 +90,7 @@ type BaseDBResult = {
   sort_order: number
   value: string | null
   options: any
-  status: 'enabled' | 'disabled'
+  status: BlockStatus
   parent_id: number | null
   depth: number
 }
@@ -127,31 +100,34 @@ export type DBPrimitiveFieldResult = BaseDBResult & {
 }
 
 export type DBBlockFieldResult = BaseDBResult & {
-  type: 'blocks'
-  children: DBBlockResult[]
+  blocks: DBBlockResult[]
 }
 
 export type DBBlockResult = BaseDBResult & {
   type: string
-  fields: Record<string, DBFieldResult>
+  fields: Record<string, DBResult>
 }
 
-export type DBFieldResult = DBPrimitiveFieldResult & DBBlockFieldResult
-
-export type DBBlock = Block & {
-  id: number
-  created_at: string
-  updated_at: string
-  value: string | null
-  sort_order: number | null
-  parent_id: number | null
-  options: number | null
-}
+export type DBResult = DBPrimitiveFieldResult | DBBlockFieldResult | DBBlockResult
 
-export type BlockStatus = 'enabled' | 'disabled'
+export type Structure = Record<string, BlockDefStructure>
 
 export type StudioConfig = {
+  siteName: string
+  admin?: {
+    logo?: HtmlEscapedString | Promise<HtmlEscapedString>
+  }
+  honoConfig: HonoOptions<BlankEnv>
+  fileBasedRouter: boolean,
+  port: number
+  structure: Structure
+}
+
+export type StudioConfigInput = {
   siteName?: string
+  admin?: {
+    logo?: HtmlEscapedString | Promise<HtmlEscapedString>
+  }
   honoConfig?: HonoOptions<BlankEnv>
   fileBasedRouter?: boolean,
   port?: number

package/utils/define.ts

@@ -30,7 +30,9 @@ export function defineBlockField(
   }
 }
 
-export function defineBlock(block: types.BlockDef): types.BlockDefStructure {
+export function defineBlock<const O extends types.BlockFields>(block: types.BlockDef<O>): types.BlockDef<O> & {
+  instanceOf: typeof BlockInstance;
+} {
   return { ...block, instanceOf: BlockInstance }
 }
 

package/utils/get-or-create-row.ts

@@ -5,6 +5,7 @@ import type {
   BlocksFieldDefStructure,
   FieldDefStructure,
 } from '../types.ts'
+import { BlockFieldInstance } from './define.ts'
 
 export function getOrCreateRow(props: {
   parentId: string | number | null
@@ -32,7 +33,7 @@ export function getOrCreateRow(props: {
   const change = db.insertInto('blocks', {
     name: name?.toString(),
     label: field.label?.toString(),
-    type: field.type?.toString(),
+    type: field.instanceOf === BlockFieldInstance ? 'blocks' : field.type?.toString(),
     sort_order: sortOrder,
     parent_id: parentId,
   })

package/utils/refresher.ts

@@ -0,0 +1,56 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { type Context } from 'hono'
+import { html } from './html.ts'
+
+let resolvers = new Set<(value: unknown) => void>()
+
+async function setupRefreshPromise() {
+  return new Promise(resolve => {
+    resolvers.add(resolve)
+  })
+}
+
+function requestRefresh() {
+  resolvers.forEach(resolve => resolve(true))
+}
+
+export const refresher = ({ root, exclude }: { root: string, exclude: string }) => {
+  const watcher = fs.watch(path.resolve(root), { recursive: true })
+
+  watcher.on('change', () => requestRefresh())
+
+  process.on('exit', () => requestRefresh())
+  process.on('SIGHUP', () => process.exit(128 + 1))
+  process.on('SIGINT', () => process.exit(128 + 2))
+  process.on('SIGTERM', () => process.exit(128 + 15))
+
+  return async (c: Context) => {
+    await setupRefreshPromise()
+
+    return c.text('')
+  }
+}
+
+export const refreshClient = (port: number) => html`<script defer type="module">
+    function reload() {
+      const retry = async () => {
+        if (await fetch('http://localhost:${port}').catch(() => false))
+          window.location.reload()
+        else requestAnimationFrame(retry)
+      }
+
+      retry()
+    }
+
+    console.log(
+      '%c REFRESHER ACTIVE ',
+      'color: green; background: lightgreen; border-radius: 2px'
+    )
+
+    const response = await fetch('http://localhost:${port}/refresh').catch(
+      () => false
+    )
+
+    reload()
+  </script>`

package/utils/renderSSE.ts

@@ -4,10 +4,14 @@ import { type SSEStreamingApi } from 'hono/streaming'
 import { type Context } from 'hono'
 
 export const renderSSE = async (stream: SSEStreamingApi, c: Context) => {
-  const componentPath = c.req.header('render')
+  const componentPaths = c.req.header('render')
   const props = c.req.header('props')
 
-  if (componentPath) {
+  if (!componentPaths) return
+
+  for (const componentPath of componentPaths.split(' ')) {
+    if (!componentPath) return
+
     try {
       const partialToRender = await import(
         path.join('../', 'components', componentPath + '.ts')
@@ -18,8 +22,9 @@ export const renderSSE = async (stream: SSEStreamingApi, c: Context) => {
 
       await stream.writeSSE({
         event: 'datastar-patch-elements',
-        data: `elements ${stripNewlines(component)}`,
+        data: component.split('\n').map((line: string) => `elements ${line}\n`).join(''),
       })
+
     } catch (error) {
       console.log(error)
     }

package/utils/startup-log.ts

@@ -1,6 +1,6 @@
 import packageJSON from '../package.json' with { type: 'json' }
 
-export default ({ port, refresherPort }: { port: number, refresherPort: number }) => {
+export default ({ port }: { port: number }) => {
   console.log('\x1b[32m%s\x1b[0m', '╭───────────────╮')
   console.log('\x1b[32m%s\x1b[0m', '│ Alstar Studio │')
   console.log('\x1b[32m%s\x1b[0m', '╰───────────────╯')
@@ -13,7 +13,7 @@ export default ({ port, refresherPort }: { port: number, refresherPort: number }
   console.log(' ')
   console.log('\x1b[32m%s\x1b[0m', `Studio:`)
   console.log(`http://localhost:${port}/studio`)
-  console.log(' ')
-  console.log('\x1b[32m%s\x1b[0m', `Refresher:`)
-  console.log(`http://localhost:${refresherPort}`)  
+  // console.log(' ')
+  // console.log('\x1b[32m%s\x1b[0m', `Refresher:`)
+  // console.log(`http://localhost:${refresherPort}`)  
 }