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

package/utils/define.ts

@@ -0,0 +1,39 @@
+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: types.Structure) {
+  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,19 @@
+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', '╰───────────────╯')
+  console.log(' ')
+  console.log('\x1b[32m%s\x1b[0m', `Version:`)
+  console.log(packageJSON.version)
+  console.log(' ')
+  console.log('\x1b[32m%s\x1b[0m', `App:`)
+  console.log(`http://localhost:${port}`)
+  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}`)  
+}

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>
-  `
-}

package/components/Block.ts

@@ -1,116 +0,0 @@
-import { html } from 'hono/html'
-import { query } from '../queries/index.ts'
-import Fields from './Fields.ts'
-import * as icons from './icons.ts'
-import { type Block } from '../types.ts'
-import Field from './Field.ts'
-import {
-  buildStructurePath,
-  type StructurePath,
-} from '../utils/build-structure-path.ts'
-
-export default (
-  entryId: string | number,
-  id: string | number,
-  fieldStructure: Block,
-  structurePath: StructurePath,
-) => {
-  const data = query.block({ id: id.toString() })
-  const blocks = query.blocks({ parent: id })
-
-  if (!data) return html`<p>No block data</p>`
-
-  const fieldStructurePath = buildStructurePath(fieldStructure, structurePath)
-
-  return html`
-  
-    <section class="block">
-      <header>
-        <h5>${fieldStructure.label}</h5>
-
-        <form
-          data-on-submit="@post('/admin/api/new-block', { contentType: 'form' })"
-        >
-          <input type="hidden" name="parent_block_id" value="${id}" />
-          <input
-            type="hidden"
-            name="sort_order"
-            value="${blocks?.length || 0}"
-          />
-
-          <fieldset role="group">
-            <select name="block">
-              ${fieldStructure.fields?.map((field) => {
-                return html`<option
-                    value="entry_id:${entryId};type:${field.type};name:${field.name};label:${field.label};sort_order:${blocks?.length ||
-                    0}"
-                  >
-                    ${field.label}
-                  </option>`
-              })}
-            </select>
-
-            <button
-              class="outline"
-              style="padding: 0 1rem"
-              data-tooltip="New entry"
-              data-placement="right"
-              type="submit"
-            >
-              Add
-            </button>
-          </fieldset>
-        </form>
-      </header>
-
-      <div data-sortable="${id}">
-        ${blocks?.map((block, idx) => {
-          const structure = fieldStructure.fields?.find(
-            (field) => field.name === block.name,
-          )
-
-          if (!structure) return
-
-          return html`
-            <article
-              data-signals="{ open${block.id}: true }"
-            >
-              <header>
-                <h6>${structure.label}</h6>
-                <div>
-                  <button
-                    data-on-click="$open${block.id} = !$open${block.id}"
-                    style="margin-right: 0.5rem"
-                    data-style-rotate="$open${block.id} ? '0deg' : '180deg'"
-                    class="shadow"
-                  >
-                    ${icons.chevron}
-                  </button>
-                  <button class="shadow">${icons.bars}</button>
-                </div>
-              </header>
-
-              <div data-show="$open${block.id}">
-                ${structure.fields
-                  ? Fields({
-                      entryId,
-                      parentId: block.id,
-                      blockStructure: structure,
-                      structurePath: [...fieldStructurePath, structure.name],
-                    })
-                  : Field({
-                      entryId,
-                      parentId: block.id,
-                      blockStructure: structure,
-                      sortOrder: idx,
-                      structurePath: [...fieldStructurePath, structure.name],
-                    })}
-                
-              </div>
-            </article>
-          `
-        })}
-      </div>
-    </section>
-  `
-}

package/components/Entry.css

@@ -1,7 +0,0 @@
-.entry {
-  form {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}