@potok-web-framework/core 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @potok-web-framework/core
+
+## 0.1.0
+
+### Minor Changes
+
+- 1bd95c1: Релиз фреймворка

package/bun.lock

@@ -0,0 +1,25 @@
+{
+  "lockfileVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "web-framework",
+      "devDependencies": {
+        "@types/bun": "latest",
+      },
+      "peerDependencies": {
+        "typescript": "^5",
+      },
+    },
+  },
+  "packages": {
+    "@types/bun": ["@types/bun@1.2.17", "", { "dependencies": { "bun-types": "1.2.17" } }, "sha512-l/BYs/JYt+cXA/0+wUhulYJB6a6p//GTPiJ7nV+QHa8iiId4HZmnu/3J/SowP5g0rTiERY2kfGKXEK5Ehltx4Q=="],
+
+    "@types/node": ["@types/node@24.0.3", "", { "dependencies": { "undici-types": "~7.8.0" } }, "sha512-R4I/kzCYAdRLzfiCabn9hxWfbuHS573x+r0dJMkkzThEa7pbrcDWK+9zu3e7aBOouf+rQAciqPFMnxwr0aWgKg=="],
+
+    "bun-types": ["bun-types@1.2.17", "", { "dependencies": { "@types/node": "*" } }, "sha512-ElC7ItwT3SCQwYZDYoAH+q6KT4Fxjl8DtZ6qDulUFBmXA8YB4xo+l54J9ZJN+k2pphfn9vk7kfubeSd5QfTVJQ=="],
+
+    "typescript": ["typescript@5.8.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ=="],
+
+    "undici-types": ["undici-types@7.8.0", "", {}, "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw=="],
+  }
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@potok-web-framework/core",
+  "version": "0.1.0",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/exports/index.d.ts"
+    },
+    "./server": {
+      "import": "./dist/server.mjs",
+      "types": "./dist/exports/server.d.ts"
+    },
+    "./client": {
+      "import": "./dist/client.mjs",
+      "types": "./dist/exports/client.d.ts"
+    },
+    "./jsx-runtime": {
+      "import": "./dist/jsx-runtime.mjs"
+    },
+    "./hmr": {
+      "import": "./dist/hmr.mjs"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:watch": "vite build --watch"
+  },
+  "devDependencies": {
+    "@types/bun": "catalog:",
+    "fast-deep-equal": "^3.1.3",
+    "fetch-to-node": "^2.1.0",
+    "klona": "^2.0.6",
+    "vite": "catalog:",
+    "vite-plugin-dts": "catalog:"
+  },
+  "peerDependencies": {
+    "typescript": "catalog:"
+  }
+}

package/src/block.ts

@@ -0,0 +1,102 @@
+import type { Effect } from './signals'
+import type { LibContext, LibHtmlElementNode, LibNode, LibProps } from './types'
+
+export abstract class LibBlock {
+  node: LibNode | null = null
+  abstract context: LibContext
+  abstract props: LibProps
+  effects: Effect[] = []
+  children: (LibBlock | null)[] = []
+
+  get nearestParentElement(): LibHtmlElementNode | null {
+    return (
+      (this.node as LibHtmlElementNode) ??
+      this.context.parentBlock?.nearestParentElement ??
+      null
+    )
+  }
+
+  get previousBlock(): LibBlock | null {
+    const parentBlock = this.context.parentBlock
+
+    if (!parentBlock) {
+      return null
+    }
+
+    const previousBlock = parentBlock.children[this.context.index - 1]
+
+    if (previousBlock) {
+      return previousBlock
+    }
+
+    if (!parentBlock.node) {
+      return parentBlock.previousBlock
+    }
+
+    return null
+  }
+
+  get nearestPreviousNode(): LibNode | null {
+    if (this.node) {
+      return this.node
+    }
+
+    const lastChild = this.children[this.children.length - 1]
+    if (lastChild) {
+      return lastChild.nearestPreviousNode
+    }
+
+    const previousBlock = this.previousBlock
+    if (previousBlock) {
+      return previousBlock.nearestPreviousNode
+    }
+
+    return null
+  }
+
+  get previousNode(): LibNode | null {
+    const previousBlock = this.previousBlock
+
+    if (previousBlock) {
+      return previousBlock.nearestPreviousNode
+    }
+
+    return null
+  }
+
+  addEffect(effect: Effect) {
+    this.effects.push(effect)
+  }
+
+  unmountChildren() {
+    this.children.forEach((childBlock) => {
+      childBlock?.unmount()
+    })
+    this.children = []
+  }
+
+  insertNode() {
+    if (!this.node) {
+      return
+    }
+
+    this.context.insertNode(
+      this.context.parentBlock?.nearestParentElement ?? null,
+      this.node,
+      this.previousNode,
+    )
+  }
+
+  unmount() {
+    if (this.node) {
+      this.context.removeNode(this.node)
+    }
+
+    this.unmountChildren()
+
+    this.effects.forEach((effect) => {
+      effect.dispose()
+    })
+    this.effects = []
+  }
+}

package/src/bootstrap-app.ts

@@ -0,0 +1,115 @@
+import { CLIENT_ENTRY_FILE_NAME } from './constants'
+import { PortalIn } from './portal'
+import { renderToString } from './render-to-string'
+import path from 'path'
+import type { PotokElement } from './types'
+import { toFetchResponse, toReqRes } from 'fetch-to-node'
+import { fragment } from './fragment'
+import { htmlElement } from './html-element'
+
+type App = (request: Request) => PotokElement
+type BootstrapAppOptions = {
+  app: App
+  port?: number
+}
+
+let serverStarted = false
+let setApp: (app: App) => void = () => {}
+
+export function bootstrapApp(options: BootstrapAppOptions) {
+  const port = options.port ?? 3000
+
+  if (!serverStarted) {
+    let currentApp = options.app
+
+    setApp = (app: App) => {
+      currentApp = app
+    }
+
+    Bun.serve({
+      async fetch(request) {
+        const url = new URL(request.url)
+        const pathname = decodeURIComponent(url.pathname)
+
+        if (process.env.NODE_ENV === 'development') {
+          const viteServer = __POTOK_DEV__?.vite
+
+          if (viteServer) {
+            const response = await new Promise<Response | undefined>(
+              (resolve) => {
+                const { req, res } = toReqRes(request)
+
+                const originalEnd = res.end.bind(res)
+
+                res.end = (...args: any[]) => {
+                  const response = originalEnd(...args)
+                  resolve(toFetchResponse(response))
+                  return response
+                }
+
+                viteServer.middlewares(req, res, () => {
+                  resolve(undefined)
+                })
+              },
+            )
+
+            if (response) {
+              return response
+            }
+          }
+        }
+
+        if (/\.[a-z0-9]+$/i.test(pathname)) {
+          const file = Bun.file(path.join(process.cwd(), 'dist', pathname))
+          if (await file.exists()) {
+            return new Response(file, {
+              headers: { 'Content-Type': file.type },
+            })
+          }
+        }
+
+        const html = await renderToString(
+          fragment({
+            children: [
+              currentApp(request),
+              PortalIn({
+                name: 'lib-scripts',
+                children: __POTOK_DEV__
+                  ? fragment({
+                      children: [
+                        htmlElement({
+                          tag: 'script',
+                          type: 'module',
+                          src: '/@vite/client',
+                        }),
+                        htmlElement({
+                          tag: 'script',
+                          type: 'module',
+                          src: '/src/client.ts',
+                        }),
+                      ],
+                    })
+                  : htmlElement({
+                      tag: 'script',
+                      type: 'module',
+                      src: `/${CLIENT_ENTRY_FILE_NAME}.js`,
+                    }),
+              }),
+            ],
+          }),
+        )
+
+        return new Response(html, {
+          headers: { 'Content-Type': 'text/html; charset=utf-8' },
+        })
+      },
+      port,
+    })
+
+    serverStarted = true
+
+    console.log(`Приложение запущено на порте ${port}`)
+  } else {
+    setApp(options.app)
+  }
+}

package/src/client-only.ts

@@ -0,0 +1,17 @@
+import { LibContextReader } from './lib-context-reader'
+import { Show } from './show'
+import { PotokElement, WithChildren } from './types'
+
+export type ClientOnlyProps = WithChildren<{}>
+
+export function ClientOnly(props: ClientOnlyProps): PotokElement {
+  return LibContextReader({
+    children: (context) =>
+      Show({
+        get when() {
+          return !context.isServer && !context.isHydrating
+        },
+        children: props.children,
+      }),
+  })
+}

package/src/constants.ts

@@ -0,0 +1,27 @@
+export const HTML_ELEMENT_STYLE_PX_PROPERTIES = new Set([
+  'width',
+  'height',
+  'top',
+  'left',
+  'right',
+  'bottom',
+  'margin',
+  'marginTop',
+  'marginBottom',
+  'marginLeft',
+  'marginRight',
+  'padding',
+  'paddingTop',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingRight',
+  'fontSize',
+  'borderWidth',
+  'borderRadius',
+  'maxWidth',
+  'minWidth',
+  'maxHeight',
+  'minHeight',
+])
+
+export const CLIENT_ENTRY_FILE_NAME = 'client'

package/src/context.ts

@@ -0,0 +1,85 @@
+import { LibBlock } from './block'
+import type {
+  LibContext,
+  MaybeArray,
+  PotokElement,
+  WithChildren,
+} from './types'
+import { mergeContext, normalizeArray, normalizeChildren } from './utils'
+
+type ContextProviderProps<Value extends Record<string, unknown>> =
+  WithChildren<{
+    value: Value
+  }>
+
+class ContextProvider<Value extends Record<string, unknown>> extends LibBlock {
+  constructor(
+    readonly props: ContextProviderProps<Value>,
+    key: symbol,
+    readonly context: LibContext
+  ) {
+    super()
+
+    normalizeChildren(props.children).forEach((childCreator, index) => {
+      this.children.push(
+        childCreator(
+          mergeContext(context, {
+            parentBlock: this,
+            index,
+            contexts: {
+              [key]: props.value,
+            },
+          })
+        )
+      )
+    })
+  }
+}
+
+type ContextConsumerProps<Value extends Record<string, unknown>> = {
+  children: MaybeArray<(value: Value) => PotokElement>
+}
+
+class ContextConsumer<Value extends Record<string, unknown>> extends LibBlock {
+  constructor(
+    readonly props: ContextConsumerProps<Value>,
+    key: symbol,
+    readonly context: LibContext
+  ) {
+    super()
+
+    const value = context.contexts[key]
+
+    if (!value) {
+      throw new Error(`Контекст не найден`)
+    }
+
+    normalizeArray(props.children).forEach((childCreator, index) => {
+      this.children.push(
+        childCreator(value as Value)(
+          mergeContext(context, {
+            parentBlock: this,
+            index,
+          })
+        )
+      )
+    })
+  }
+}
+
+export function createContext<Value extends Record<string, unknown>>() {
+  const key = Symbol('context')
+
+  return {
+    provider(props: ContextProviderProps<Value>): PotokElement {
+      return function (context: LibContext) {
+        return new ContextProvider(props, key, context)
+      }
+    },
+    reader(props: ContextConsumerProps<Value>): PotokElement {
+      return function (context: LibContext) {
+        return new ContextConsumer(props, key, context)
+      }
+    },
+  }
+}

package/src/detect-child.ts

@@ -0,0 +1,21 @@
+import { text } from './text'
+import { Child } from './types'
+
+type DetectChildProps = {
+  readonly value: Child
+}
+
+export function detectChild(props: DetectChildProps): Child {
+  const value = props.value
+  const type = typeof value
+
+  if (type === 'string' || type === 'number' || type === 'boolean') {
+    return text({
+      get text() {
+        return props.value
+      },
+    })
+  }
+
+  return value
+}

package/src/error-boundary.ts

@@ -0,0 +1,51 @@
+import { LibBlock } from './block'
+import type { LibContext, PotokElement, WithChildren } from './types'
+import { mergeContext, normalizeChildren } from './utils'
+
+export type ErrorBoundaryProps = WithChildren<{
+  onError?: (error: Error) => void
+}>
+
+class ErrorBoundaryClass extends LibBlock {
+  constructor(
+    readonly props: ErrorBoundaryProps,
+    readonly context: LibContext
+  ) {
+    super()
+
+    try {
+      normalizeChildren(props.children).forEach((childCreator, index) => {
+        this.children.push(
+          childCreator(
+            mergeContext(context, {
+              parentBlock: this,
+              index,
+            })
+          )
+        )
+      })
+    } catch (error) {
+      props.onError?.(this.buildError(error))
+    }
+  }
+
+  override unmount() {
+    try {
+      super.unmount()
+    } catch (error) {
+      this.props.onError?.(this.buildError(error))
+    }
+  }
+
+  private buildError(error: unknown) {
+    return error instanceof Error
+      ? error
+      : new Error(typeof error === 'string' ? error : 'Unknown error')
+  }
+}
+
+export function ErrorBoundary(props: ErrorBoundaryProps): PotokElement {
+  return function (context: LibContext) {
+    return new ErrorBoundaryClass(props, context)
+  }
+}

package/src/exports/client.ts

@@ -0,0 +1 @@
+export { renderToDOM } from '../render-to-dom'

package/src/exports/hmr.ts

@@ -0,0 +1 @@
+export { registerComponent } from '../hmr/register-component'

package/src/exports/index.ts

@@ -0,0 +1,21 @@
+export { ClientOnly } from '../client-only'
+export { ErrorBoundary } from '../error-boundary'
+export { Lazy } from '../lazy'
+export { LibContextReader } from '../lib-context-reader'
+export { LibScripts } from '../lib-scripts'
+export { Lifecycle } from '../lifecycle'
+export { List } from '../list'
+export { PortalIn, PortalOut } from '../portal'
+export { createElementReference } from '../ref'
+export { Show } from '../show'
+export {
+  createSignal,
+  createEffect,
+  batch,
+  untrack,
+  deepTrack,
+  getSignal,
+} from '../signals'
+export { createStore } from '../store'
+export type { PotokElement, WithChildren } from '../types'
+export type * from '../jsx-types.ts'

package/src/exports/jsx-runtime.ts

@@ -0,0 +1,4 @@
+export { fragment } from '../fragment'
+export { htmlElement } from '../html-element'
+export { text } from '../text'
+export { detectChild } from '../detect-child'

package/src/exports/server.ts

@@ -0,0 +1 @@
+export { bootstrapApp } from '../bootstrap-app'

package/src/fragment.ts

@@ -0,0 +1,28 @@
+import { LibBlock } from './block'
+import type { LibContext, PotokElement, WithChildren } from './types'
+import { mergeContext, normalizeChildren } from './utils'
+
+type FragmentProps = WithChildren<{}>
+
+class FragmentClass extends LibBlock {
+  constructor(readonly props: FragmentProps, readonly context: LibContext) {
+    super()
+
+    normalizeChildren(props.children).forEach((childCreator, index) => {
+      this.children.push(
+        childCreator(
+          mergeContext(context, {
+            parentBlock: this,
+            index,
+          })
+        )
+      )
+    })
+  }
+}
+
+export function fragment(props: FragmentProps): PotokElement {
+  return function (context: LibContext) {
+    return new FragmentClass(props, context)
+  }
+}

package/src/global.dev.d.ts

@@ -0,0 +1,12 @@
+import type { ViteDevServer } from 'vite'
+import { PotokElement } from './types'
+
+declare global {
+  const __POTOK_DEV__:
+    | {
+        vite: ViteDevServer
+      }
+    | undefined
+}
+
+export {}

package/src/hmr/hmr-dev.ts

@@ -0,0 +1,10 @@
+import { CachedInstanceState } from './registered-component'
+import { HMRRegistry } from './registry'
+
+export const HMR_DEV = {
+  registry: new HMRRegistry(),
+  currentInstance: null as {
+    states: CachedInstanceState[]
+    stateIndex: number
+  } | null,
+}