@alstar/studio 0.0.0-beta.1 → 0.0.0-beta.10

package/types.ts

@@ -1,14 +1,131 @@
-import { type HonoOptions } from "hono/hono-base"
-import { type BlankEnv } from "hono/types"
+import { type HttpBindings } from '@hono/node-server'
+import { type Context } from 'hono'
+import { type HonoOptions } from 'hono/hono-base'
+import { type BlankInput, type BlankEnv } from 'hono/types'
+import {
+  BlockFieldInstance,
+  BlockInstance,
+  FieldInstance,
+} from './utils/define.ts'
+
+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?: Block[]
+  fields: Record<string, Field | Block>
+}
+
+export type Structure = Record<string, BlockDefStructure>
+
+// --- Field & block definitions ---
+type FieldType = 'text' | 'slug' | 'markdown' | 'image'
+
+interface BaseField {
+  label: string
+  type: FieldType
+  description?: string
+}
+
+interface TextField extends BaseField {
+  type: 'text' | 'slug' | 'markdown'
+}
+
+interface TextFieldStructure extends TextField {
+  instanceOf: typeof FieldInstance
+}
+
+interface ImageField extends BaseField {
+  type: 'image'
+}
+
+interface ImageFieldStructure extends ImageField {
+  instanceOf: typeof FieldInstance
+}
+
+export interface BlocksFieldDef {
+  label: string
+  type: 'blocks'
+  description?: string
+  children: Record<string, BlockDefStructure | FieldDefStructure>
+}
+
+export interface BlocksFieldDefStructure extends BlocksFieldDef {
+  instanceOf: typeof BlockFieldInstance
+}
+
+export type FieldDef = TextField | ImageField
+export type FieldDefStructure = TextFieldStructure | ImageFieldStructure
+
+export interface BlockDef {
+  label: string
+  type: string
+  fields: Record<string, FieldDefStructure | BlocksFieldDefStructure>
+  description?: string
+}
+
+export interface BlockDefStructure extends BlockDef {
+  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
+  updated_at: string
+  name: string
+  label: string
+  sort_order: number
+  value: string | null
+  options: any
+  status: 'enabled' | 'disabled'
+  parent_id: number | null
+  depth: number
+}
+
+export type DBPrimitiveFieldResult = BaseDBResult & {
+  type: FieldDef
+}
+
+export type DBBlockFieldResult = BaseDBResult & {
+  type: 'blocks'
+  children: DBBlockResult[]
+}
+
+export type DBBlockResult = BaseDBResult & {
+  type: string
+  fields: Record<string, DBFieldResult>
 }
 
-export type Structure = Block[]
+export type DBFieldResult = DBPrimitiveFieldResult & DBBlockFieldResult
 
 export type DBBlock = Block & {
   id: number
@@ -16,10 +133,21 @@ export type DBBlock = Block & {
   updated_at: string
   value: string | null
   sort_order: number | null
-  parent_block_id: number | null
+  parent_id: number | null
   options: number | null
 }
 
+export type BlockStatus = 'enabled' | 'disabled'
+
 export type StudioConfig = {
+  siteName?: string
   honoConfig?: HonoOptions<BlankEnv>
+  port?: number
+  structure: Structure
 }
+
+export type RequestContext = Context<
+  { Bindings: HttpBindings },
+  string,
+  BlankInput
+>

package/utils/buildBlocksTree.ts

@@ -6,7 +6,7 @@ type Block = {
   sort_order: number
   value: string | null
   options: any // JSON-parsed if necessary
-  parent_block_id: number | null
+  parent_id: number | null
   depth: number
   // ... you can add other fields if needed
 }
@@ -26,13 +26,13 @@ export function buildBlockTree(blocks: Block[]): BlockWithChildren {
   for (const block of blocks) {
     const current = blockMap.get(block.id)!
 
-    if (block.parent_block_id != null) {
-      const parent = blockMap.get(block.parent_block_id)
+    if (block.parent_id != null) {
+      const parent = blockMap.get(block.parent_id)
       if (parent) {
         parent.fields.push(current)
       } else {
         console.warn(
-          `Parent with id ${block.parent_block_id} not found for block ${block.id}`,
+          `Parent with id ${block.parent_id} not found for block ${block.id}`,
         )
       }
     } else {

package/utils/define.ts

@@ -0,0 +1,41 @@
+import * as types from '../types.ts'
+import { type HtmlEscapedString } from './html.ts'
+
+export const defineConfig = (config: types.StudioConfig) => config
+
+export const defineEntry = (
+  fn: (
+    c: types.RequestContext,
+  ) => HtmlEscapedString | Promise<HtmlEscapedString>,
+) => fn
+
+export const FieldInstance = Symbol('field')
+export const BlockFieldInstance = Symbol('blockfield')
+export const BlockInstance = Symbol('block')
+
+// --- Identity helpers (preserve literal types) ---
+export function defineField(field: types.FieldDef): types.FieldDefStructure {
+  return {
+    ...field,
+    instanceOf: FieldInstance,
+  }
+}
+
+export function defineBlockField(
+  field: types.BlocksFieldDef,
+): types.BlocksFieldDefStructure {
+  return {
+    ...field,
+    instanceOf: BlockFieldInstance,
+  }
+}
+
+export function defineBlock(block: types.BlockDef): types.BlockDefStructure {
+  return { ...block, instanceOf: BlockInstance }
+}
+
+export function defineStructure(
+  structure: Record<string, types.BlockDefStructure>,
+) {
+  return structure
+}

package/utils/file-based-router.ts

@@ -3,13 +3,22 @@ import path from 'node:path'
 import { Hono } from 'hono'
 import { type HtmlEscapedString } from 'hono/utils/html'
 
-type Page<C> = (c?: C) => HtmlEscapedString | Promise<HtmlEscapedString>
+export type Page<C> = (c?: C) => HtmlEscapedString | Promise<HtmlEscapedString>
 
 export const fileBasedRouter = async (rootdir: string) => {
   const router = new Hono()
 
   const root = path.resolve(rootdir)
-  const dirs = await fs.readdir(root, { recursive: true })
+
+  let dirs
+
+  try {
+    dirs = await fs.readdir(root, { recursive: true })
+  } catch (error) {
+    console.log('No files in:', root)
+    return
+  }
+
   const files = dirs.filter((dir) => path.extname(dir))
 
   await Promise.all(

package/utils/get-config.ts

@@ -3,15 +3,6 @@ import path from 'node:path'
 
 const CONFIG_FILE_NAME = 'alstar.config.ts'
 
-async function fileExists(filepath: string) {
-  // does the file exist?
-  try {
-    await fs.stat(filepath)
-  } catch (error) {
-    return {}
-  }
-}
-
 export const getConfig = async <P>(): Promise<P> => {
   const root = path.resolve('./')
 
@@ -24,3 +15,11 @@ export const getConfig = async <P>(): Promise<P> => {
 
   return config as P
 }
+
+async function fileExists(filepath: string) {
+  try {
+    return await fs.stat(filepath)
+  } catch (error) {
+    return null
+  }
+}

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

@@ -0,0 +1,41 @@
+import { db } from '@alstar/db'
+import { query } from '../queries/index.ts'
+import type {
+  BlockDefStructure,
+  BlocksFieldDefStructure,
+  FieldDefStructure,
+} from '../types.ts'
+
+export function getOrCreateRow(props: {
+  parentId: string | number | null
+  name: string
+  field: BlockDefStructure | BlocksFieldDefStructure | FieldDefStructure
+  sortOrder?: number
+  id?: number
+}) {
+  const { parentId, name, field, sortOrder = 0, id } = props
+
+  if (id) {
+    return query.block({
+      id: id?.toString(),
+    })
+  }
+
+  const data = query.block({
+    parent_id: parentId?.toString() || null,
+    name: name,
+    sort_order: sortOrder.toString(),
+  })
+
+  if (data) return data
+
+  const change = db.insertInto('blocks', {
+    name: name?.toString(),
+    label: field.label?.toString(),
+    type: field.type?.toString(),
+    sort_order: sortOrder,
+    parent_id: parentId,
+  })
+
+  return query.block({ id: change.lastInsertRowid.toString() })
+}

package/utils/html.ts

@@ -0,0 +1,247 @@
+export const HtmlEscapedCallbackPhase = {
+  Stringify: 1,
+  BeforeStream: 2,
+  Stream: 3,
+} as const
+type HtmlEscapedCallbackOpts = {
+  buffer?: [string]
+  phase: (typeof HtmlEscapedCallbackPhase)[keyof typeof HtmlEscapedCallbackPhase]
+  context: Readonly<object> // An object unique to each JSX tree. This object is used as the WeakMap key.
+}
+export type HtmlEscapedCallback = (
+  opts: HtmlEscapedCallbackOpts,
+) => Promise<string> | undefined
+export type HtmlEscaped = {
+  isEscaped: true
+  callbacks?: HtmlEscapedCallback[]
+}
+export type HtmlEscapedString = string & HtmlEscaped
+
+/**
+ * StringBuffer contains string and Promise<string> alternately
+ * The length of the array will be odd, the odd numbered element will be a string,
+ * and the even numbered element will be a Promise<string>.
+ * When concatenating into a single string, it must be processed from the tail.
+ * @example
+ * [
+ *   'framework.',
+ *   Promise.resolve('ultra fast'),
+ *   'a ',
+ *   Promise.resolve('is '),
+ *   'Hono',
+ * ]
+ */
+export type StringBuffer = (string | Promise<string>)[]
+export type StringBufferWithCallbacks = StringBuffer & {
+  callbacks: HtmlEscapedCallback[]
+}
+
+export const raw = (
+  value: unknown,
+  callbacks?: HtmlEscapedCallback[],
+): HtmlEscapedString => {
+  const escapedString = new String(value) as HtmlEscapedString
+  escapedString.isEscaped = true
+  escapedString.callbacks = callbacks
+
+  return escapedString
+}
+
+// The `escapeToBuffer` implementation is based on code from the MIT licensed `react-dom` package.
+// https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/server/escapeTextForBrowser.js
+
+const escapeRe = /[&<>'"]/
+
+export const stringBufferToString = async (
+  buffer: StringBuffer,
+  callbacks: HtmlEscapedCallback[] | undefined,
+): Promise<HtmlEscapedString> => {
+  let str = ''
+  callbacks ||= []
+  const resolvedBuffer = await Promise.all(buffer)
+  for (let i = resolvedBuffer.length - 1; ; i--) {
+    str += resolvedBuffer[i]
+    i--
+    if (i < 0) {
+      break
+    }
+
+    let r = resolvedBuffer[i]
+    if (typeof r === 'object') {
+      callbacks.push(...((r as HtmlEscapedString).callbacks || []))
+    }
+
+    const isEscaped = (r as HtmlEscapedString).isEscaped
+    r = await (typeof r === 'object' ? (r as HtmlEscapedString).toString() : r)
+    if (typeof r === 'object') {
+      callbacks.push(...((r as HtmlEscapedString).callbacks || []))
+    }
+
+    if ((r as HtmlEscapedString).isEscaped ?? isEscaped) {
+      str += r
+    } else {
+      const buf = [str]
+      escapeToBuffer(r, buf)
+      str = buf[0]
+    }
+  }
+
+  return raw(str, callbacks)
+}
+
+export const escapeToBuffer = (str: string, buffer: StringBuffer): void => {
+  const match = str.search(escapeRe)
+  if (match === -1) {
+    buffer[0] += str
+    return
+  }
+
+  let escape
+  let index
+  let lastIndex = 0
+
+  for (index = match; index < str.length; index++) {
+    switch (str.charCodeAt(index)) {
+      case 34: // "
+        escape = '&quot;'
+        break
+      case 39: // '
+        escape = '&#39;'
+        break
+      case 38: // &
+        escape = '&amp;'
+        break
+      case 60: // <
+        escape = '&lt;'
+        break
+      case 62: // >
+        escape = '&gt;'
+        break
+      default:
+        continue
+    }
+
+    buffer[0] += str.substring(lastIndex, index) + escape
+    lastIndex = index + 1
+  }
+
+  buffer[0] += str.substring(lastIndex, index)
+}
+
+export const resolveCallbackSync = (
+  str: string | HtmlEscapedString,
+): string => {
+  const callbacks = (str as HtmlEscapedString)
+    .callbacks as HtmlEscapedCallback[]
+  if (!callbacks?.length) {
+    return str
+  }
+  const buffer: [string] = [str]
+  const context = {}
+
+  callbacks.forEach((c) =>
+    c({ phase: HtmlEscapedCallbackPhase.Stringify, buffer, context }),
+  )
+
+  return buffer[0]
+}
+
+export const resolveCallback = async (
+  str: string | HtmlEscapedString | Promise<string>,
+  phase: (typeof HtmlEscapedCallbackPhase)[keyof typeof HtmlEscapedCallbackPhase],
+  preserveCallbacks: boolean,
+  context: object,
+  buffer?: [string],
+): Promise<string> => {
+  if (typeof str === 'object' && !(str instanceof String)) {
+    if (!((str as unknown) instanceof Promise)) {
+      str = (str as unknown as string).toString() // HtmlEscapedString object to string
+    }
+    if ((str as string | Promise<string>) instanceof Promise) {
+      str = await (str as unknown as Promise<string>)
+    }
+  }
+
+  const callbacks = (str as HtmlEscapedString)
+    .callbacks as HtmlEscapedCallback[]
+  if (!callbacks?.length) {
+    return Promise.resolve(str)
+  }
+  if (buffer) {
+    buffer[0] += str
+  } else {
+    buffer = [str as string]
+  }
+
+  const resStr = Promise.all(
+    callbacks.map((c) => c({ phase, buffer, context })),
+  ).then((res) =>
+    Promise.all(
+      res
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .filter<string>(Boolean as any)
+        .map((str) => resolveCallback(str, phase, false, context, buffer)),
+    ).then(() => (buffer as [string])[0]),
+  )
+
+  if (preserveCallbacks) {
+    return raw(await resStr, callbacks)
+  } else {
+    return resStr
+  }
+}
+
+export const html = (
+  strings: TemplateStringsArray,
+  ...values: unknown[]
+): HtmlEscapedString | Promise<HtmlEscapedString> => {
+  const buffer: StringBufferWithCallbacks = [''] as StringBufferWithCallbacks
+
+  for (let i = 0, len = strings.length - 1; i < len; i++) {
+    buffer[0] += strings[i]
+
+    const children = Array.isArray(values[i])
+      ? (values[i] as Array<unknown>).flat(Infinity)
+      : [values[i]]
+    for (let i = 0, len = children.length; i < len; i++) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const child = children[i] as any
+      if (typeof child === 'string') {
+        escapeToBuffer(child, buffer)
+      } else if (typeof child === 'number') {
+        ;(buffer[0] as string) += child
+      } else if (
+        typeof child === 'boolean' ||
+        child === null ||
+        child === undefined
+      ) {
+        continue
+      } else if (
+        typeof child === 'object' &&
+        (child as HtmlEscaped).isEscaped
+      ) {
+        if ((child as HtmlEscapedString).callbacks) {
+          buffer.unshift('', child)
+        } else {
+          const tmp = child.toString()
+          if (tmp instanceof Promise) {
+            buffer.unshift('', tmp)
+          } else {
+            buffer[0] += tmp
+          }
+        }
+      } else if (child instanceof Promise) {
+        buffer.unshift('', child)
+      } else {
+        escapeToBuffer(child.toString(), buffer)
+      }
+    }
+  }
+  buffer[0] += strings.at(-1) as string
+
+  return buffer.length === 1
+    ? 'callbacks' in buffer
+      ? raw(resolveCallbackSync(raw(buffer[0], buffer.callbacks)))
+      : raw(buffer[0])
+    : stringBufferToString(buffer, buffer.callbacks)
+}

package/utils/startup-log.ts

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

package/components/AdminPanel/AdminPanel.css

@@ -1,59 +0,0 @@
-.admin-panel {
-  /* background: hsla(0, 0%, 0%, 0.1); */
-  padding: 40px;
-  padding-right: 0;
-
-  height: 100%;
-  min-height: inherit;
-
-  min-width: 200px;
-
-  > h1 {
-    padding-bottom: 1rem;
-
-    a {
-      display: flex;
-    }
-
-    svg {
-      height: 1.6rem;
-    }
-  }
-
-  form {
-    padding-bottom: 1rem;
-    
-    button {
-      margin: 10px 0px 20px;
-    }
-  }
-
-  #entries ul {
-    padding: 0;
-
-    > li {
-      margin-bottom: 0px;
-      border-radius: 8px;
-      display: flex;
-      justify-content: space-between;
-      align-items: stretch;
-      /* align-items: center; */
-      list-style: none;
-      margin-inline: -1rem;
-
-      a {
-        text-decoration: none;
-        width: 100%;
-        padding: 0.5rem 1rem;
-      }
-
-      button {
-        border-radius: 7px;
-
-        svg {
-          margin: 0.5rem 1rem;
-        }
-      }
-    }
-  }
-}

package/components/AdminPanel/AdminPanel.ts

@@ -1,57 +0,0 @@
-import { html } from 'hono/html'
-import type { Structure } from '../../types.ts'
-import { logo } from '../icons.ts'
-import { rootdir } from '../../index.ts'
-import Entries from '../Entries.ts'
-import * as icons from '../icons.ts'
-
-export default (structure: Structure) => {
-  return html`
-    <link
-      rel="stylesheet"
-      href="${rootdir}/components/AdminPanel/AdminPanel.css"
-    />
-
-    <div class="admin-panel">
-      <h1>
-        <a href="/admin" aria-label="Go to dashboard"> ${logo} </a>
-      </h1>
-
-      <aside>
-        <form
-          data-on-submit="@post('/admin/api/block', { contentType: 'form' })"
-        >
-          <!-- <select name="type">
-            ${structure.map(
-            (block) => html`
-              <option value="${block.type}">
-                ${block.label}
-              </option>
-              `,
-          )}
-          </select>
-          <input type="submit" value="Create" /> -->
-
-          <!-- TODO: currently only handles a single entry type -->
-          ${structure.length
-            ? html`<input
-                  type="hidden"
-                  name="type"
-                  value="${structure[0].type}"
-                />
-                <button
-                  class="ghost"
-                  style="padding: 10px; margin: 0 -13px; display: flex;"
-                  data-tooltip="New entry"
-                  data-placement="right"
-                >
-                  ${icons.newDocument}
-                </button>`
-            : ''}
-        </form>
-      </aside>
-
-      ${Entries()}
-    </div>
-  `
-}