eclipsa 0.1.0

package/core/component.ts

@@ -0,0 +1,7 @@
+import type { JSX } from '../jsx/types.ts'
+
+export type Component<T = unknown> = (props: T) => JSX.Element
+
+export const component$ = <T = unknown>(component: Component<T>): Component<T> => {
+  return component
+}

package/core/dev-client/mod.ts

@@ -0,0 +1,17 @@
+import { hydrate } from './renderer.ts'
+import type { DevClientInfo } from './types.ts'
+
+const getDevInfo = (): DevClientInfo => {
+  const elem = document.getElementById('eclipsa-devinfo')
+
+  if (!elem) {
+    throw new Error('devinfo element is falsy.')
+  }
+
+  return JSON.parse(elem.innerHTML)
+}
+
+export const initDevClient = async () => {
+  const Component = (await import(/* @vite-ignore */getDevInfo().filePath)).default
+  hydrate(Component, document.body)
+}

package/core/dev-client/renderer.ts

@@ -0,0 +1,5 @@
+import type { Component } from '../component.ts'
+
+export const hydrate = (Component: Component, target: HTMLElement) => {
+  console.log(Component)
+}

package/core/dev-client/types.ts

@@ -0,0 +1,3 @@
+export interface DevClientInfo {
+  filePath: string
+}

package/core/mod.ts

@@ -0,0 +1,4 @@
+export * from './component.ts'
+export * from './signal.ts'
+export * from './types.ts'
+export * from './dev-client/mod.ts'

package/core/signal.ts

@@ -0,0 +1,20 @@
+import { signal } from 'alien-signals'
+
+interface Signal<T> {
+  value: T
+}
+interface UseSignal {
+  <T>(v: T): Signal<T>
+  <T>(v?: T | undefined): Signal<T | undefined>
+}
+export const useSignal: UseSignal = (value) => {
+  const sig = signal(value)
+  return {
+    get value() {
+      return sig.get()
+    },
+    set value(value) {
+      sig.set(value)
+    },
+  }
+}

package/core/types.ts

@@ -0,0 +1,6 @@
+import type { JSX } from '../jsx/jsx-runtime.ts'
+
+export interface SSRRootProps {
+  children: JSX.Element[] | JSX.Element
+  head: JSX.Element
+}

package/deno.json

@@ -0,0 +1,23 @@
+{
+  "name": "@xely/eclipsa",
+  "exports": {
+    ".": "./mod.ts",
+    "./vite": "./vite/mod.ts",
+    "./jsx-runtime": "./jsx/jsx-runtime.ts",
+    "./jsx-dev-runtime": "./jsx/jsx-dev-runtime.ts",
+    "./jsx": "./jsx/mod.ts"
+  },
+  "imports": {
+    "@babel/core": "npm:@babel/core@^7.25.8",
+    "@babel/plugin-syntax-jsx": "npm:@babel/plugin-syntax-jsx@^7.25.7",
+    "@babel/plugin-transform-react-jsx": "npm:@babel/plugin-transform-react-jsx@^7.25.7",
+    "@babel/traverse": "npm:@babel/traverse@^7.25.7",
+    "@babel/types": "npm:@babel/types@^7.25.8",
+    "@types/babel__core": "npm:@types/babel__core@^7.20.5",
+    "@types/babel__traverse": "npm:@types/babel__traverse@^7.20.6",
+    "alien-signals": "npm:alien-signals@^0.0.6",
+    "babel-plugin-jsx-dom-expressions": "npm:babel-plugin-jsx-dom-expressions@^0.39.2",
+    "hono": "npm:hono@^4.6.4",
+    "vite": "npm:vite@^6.0.0-beta.2"
+  }
+}

package/jsx/jsx-dev-runtime.ts

@@ -0,0 +1,19 @@
+import { FRAGMENT } from './shared.ts'
+import type { JSX } from './types.ts'
+
+interface Source {
+  fileName: string
+}
+export const jsxDEV = (
+  type: JSX.Type,
+  props: Record<string, unknown>,
+  key: string | number | symbol,
+  isStatic: boolean,
+  _source: Source,
+): JSX.Element => ({
+  type,
+  props,
+  key,
+  isStatic,
+})
+export const Fragment = FRAGMENT

package/jsx/jsx-runtime.ts

@@ -0,0 +1 @@
+export type { JSX } from './types.ts'

package/jsx/mod.ts

@@ -0,0 +1,34 @@
+import type { JSX } from './jsx-runtime.ts'
+import { FRAGMENT } from './shared.ts'
+
+export const renderToString = (elem: JSX.Element): string => {
+  if (!elem) {
+    return ''
+  }
+  if (typeof elem === 'string' || typeof elem === 'boolean' || typeof elem === 'number') {
+    return elem.toString()
+  }
+  if (typeof elem.type === 'function') {
+    return renderToString(elem.type(elem.props))
+  }
+  let attrText = ''
+  for (const [k, v] of Object.entries(elem.props)) {
+    switch (k) {
+      case 'children':
+        break
+      default: {
+        attrText += `${k}="${v}"`
+      }
+    }
+  }
+  let childrenText = ''
+  if (Array.isArray(elem.props.children)) {
+    for (const child of elem.props.children) {
+      childrenText += renderToString(child)
+    }
+  } else {
+    childrenText += renderToString(elem.props.children as JSX.Element)
+  }
+  const result = elem.type === FRAGMENT ? childrenText : `<${elem.type} ${attrText}>${childrenText}</${elem.type}>`
+  return result
+}

package/jsx/shared.ts

@@ -0,0 +1 @@
+export const FRAGMENT = '__ECLIPSA_FRAGMENT'

package/jsx/types.ts

@@ -0,0 +1,23 @@
+// deno-lint-ignore no-namespace
+export namespace JSX {
+  export type Type = string | ((props: unknown) => Element)
+  export type Childable = Element
+  export type Element = {
+    type: Type
+    props: Record<string, unknown>
+    key?: string | number | symbol
+    isStatic: boolean
+  } | string | number | undefined | null | boolean
+
+  export interface IntrinsicAttributes {
+    key?: any
+  }
+
+  export interface IntrinsicElements {
+    [name: string]: any
+  }
+
+  export interface ElementChildrenAttribute {
+    children?: any
+  }
+}

package/mod.ts

@@ -0,0 +1,2 @@
+export * from './core/mod.ts'
+export * from './jsx/types.ts'

package/package.json

@@ -0,0 +1,4 @@
+{
+    "name": "eclipsa",
+    "version": "0.1.0"
+}

package/transformers/dev-client/mod.ts

@@ -0,0 +1,39 @@
+// @ts-types="@types/babel__core"
+import { transform} from '@babel/core'
+// @ts-types="@types/babel__traverse"
+import type { Visitor } from '@babel/traverse'
+import SyntaxJSX from '@babel/plugin-syntax-jsx'
+import { getJSXType, transformChildren, transformProps } from '../utils/jsx.ts'
+import * as t from '@babel/types'
+
+const pluginClientDevJSX = () => {
+  return {
+    inherits: SyntaxJSX.default,
+    visitor: {
+      JSXElement(path) {
+        const openingElement = path.node.openingElement
+        const type = getJSXType(openingElement)
+        const { props } = transformProps(openingElement)
+        const children = transformChildren(path.node)
+        props.properties.push(t.objectProperty(t.stringLiteral('children'), children))
+
+        const fn = t.arrowFunctionExpression([], t.objectExpression([
+          t.objectProperty(t.stringLiteral('type'), type),
+          t.objectProperty(t.stringLiteral('props'), props),
+        ]))
+        path.replaceWith(fn)
+      }
+    } satisfies Visitor
+  }
+}
+
+export const transformClientDevJSX = (input: string) => {
+  const resultCode = transform(input, {
+    plugins: [pluginClientDevJSX()],
+    sourceMaps: 'inline'
+  })?.code
+  if (!resultCode) {
+    throw new Error('Compiling JSX was failed.')
+  }
+  return resultCode
+}

package/transformers/dev-ssr/mod.ts

@@ -0,0 +1,52 @@
+// @ts-types="@types/babel__core"
+import { transform, types as t } from '@babel/core'
+// @ts-types="@types/babel__traverse"
+import type { Visitor } from '@babel/traverse'
+import SyntaxJSX from '@babel/plugin-syntax-jsx'
+import { getJSXType, transformChildren, transformProps } from '../utils/jsx.ts'
+
+const pluginJSX = () => {
+  return {
+    inherits: SyntaxJSX.default,
+    visitor: {
+      Program: {
+        enter(path) {
+          const jsxDEV = t.identifier('jsxDEV')
+          const importDeclaration = t.importDeclaration([
+            t.importSpecifier(jsxDEV, jsxDEV)
+          ], t.stringLiteral('@xely/eclipsa/jsx-dev-runtime'))
+
+          path.unshiftContainer('body', importDeclaration)
+        }
+      },
+      JSXElement(path) {
+        const openingElement = path.node.openingElement
+
+        const type = getJSXType(openingElement)
+        const { props, key } = transformProps(openingElement)
+        const children = transformChildren(path.node)
+        props.properties.push(t.objectProperty(t.stringLiteral('children'), children))
+        
+        const fn = t.callExpression(t.identifier('jsxDEV'), [
+          type,
+          props,
+          key ?? t.nullLiteral(),
+          t.booleanLiteral(false)
+        ])
+        path.replaceWith(fn)
+      },
+    } satisfies Visitor,
+  }
+}
+
+export const transformJSX = (code: string): string => {
+  const resultCode = transform(code, {
+    plugins: [pluginJSX()],
+    sourceMaps: 'inline'
+  })?.code
+
+  if (!resultCode) {
+    throw new Error('Compiling JSX was failed.')
+  }
+  return resultCode
+}

package/transformers/utils/jsx.ts

@@ -0,0 +1,77 @@
+// @ts-types="@types/babel__core"
+import { types as t } from '@babel/core'
+
+export const transformProps = (elem: t.JSXOpeningElement) => {
+  const propArr: (t.ObjectProperty | t.SpreadElement)[] = []
+  let key: t.Expression | undefined
+  for (const attr of elem.attributes) {
+    if (t.isJSXSpreadAttribute(attr)) {
+      propArr.push(t.spreadElement(attr.argument))
+      continue
+    }
+    if (t.isJSXNamespacedName(attr.name)) {
+      throw new Error('JSXNamespacedName is not supported.')
+    }
+    const isKey = attr.name.name === 'key'
+    const name = t.stringLiteral(attr.name.name)
+    if (attr.value === null) {
+      propArr.push(t.objectProperty(name, t.booleanLiteral(true)))
+      break
+    }
+    if (t.isStringLiteral(attr.value)) {
+      if (isKey) {
+        key = attr.value
+      }
+      propArr.push(t.objectProperty(name, attr.value))
+      continue
+    }
+    if (t.isJSXExpressionContainer(attr.value)) {
+      if (t.isJSXEmptyExpression(attr.value.expression)) {
+        continue
+      }
+      if (isKey) {
+        key = attr.value.expression
+      }
+      propArr.push(t.objectProperty(name, attr.value.expression))
+      continue
+    }
+  }
+  return {
+    props: t.objectExpression(propArr),
+    key,
+  }
+}
+
+const UPPER_CASE_REGEX = /[A-Z]/
+export const getJSXType = (elem: t.JSXOpeningElement) => {
+  if (elem.name.type !== 'JSXIdentifier') {
+    throw new TypeError('expected JSXIdentifier')
+  }
+  const name = elem.name.name
+  if (UPPER_CASE_REGEX.test(name[0])) {
+    return t.identifier(name)
+  }
+  return t.stringLiteral(name)
+}
+
+export const transformChildren = (elem: t.JSXElement) => t.arrayExpression(
+  elem.children.map((child) => {
+    if (t.isJSXText(child)) {
+      const str = child.value.trim()
+      if (str === '') {
+        return null
+      }
+      return t.stringLiteral(str)
+    }
+    if (t.isJSXExpressionContainer(child)) {
+      if (t.isJSXEmptyExpression(child.expression)) {
+        return null
+      }
+      return child.expression
+    }
+    if (t.isJSXElement(child)) {
+      return child as unknown as t.Expression
+    }
+    return null
+  }).filter(Boolean)
+)

package/utils/node-connect.ts

@@ -0,0 +1,55 @@
+import type {
+  IncomingMessage,
+  ServerResponse,
+} from 'node:http'
+
+export const incomingMessageToRequest = (
+  incomingMessage: IncomingMessage,
+): Request => {
+  const body =
+    (incomingMessage.method !== 'GET' && incomingMessage.method !== 'HEAD')
+      ? new ReadableStream<Uint8Array>({
+        start(controller) {
+          incomingMessage.on('data', (chunk) => {
+            controller.enqueue(new Uint8Array(chunk))
+          })
+          incomingMessage.on('end', () => {
+            controller.close()
+          })
+        },
+      })
+      : null
+  const headers = new Headers()
+  for (const [k, v] of Object.entries(incomingMessage.headers)) {
+    if (Array.isArray(v)) {
+      for (const value of v) {
+        headers.append(k, value)
+      }
+    } else if (v) {
+      headers.append(k, v)
+    }
+  }
+  return new Request(new URL(incomingMessage.url ?? '', 'http://localhost'), {
+    method: incomingMessage.method,
+    body,
+    headers,
+  })
+}
+
+export const responseForServerResponse = async (
+  res: Response,
+  serverRes: ServerResponse,
+) => {
+  for (const [k, v] of res.headers) {
+    serverRes.setHeader(k, v)
+  }
+  serverRes.statusCode = res.status
+  serverRes.statusMessage = res.statusText
+
+  if (res.body) {
+    for await (const chunk of res.body) {
+      serverRes.write(chunk)
+    }
+  }
+  serverRes.end()
+}

package/vite/dev-app/mod.ts

@@ -0,0 +1,88 @@
+import { Hono, type Context } from 'hono'
+import type { DevEnvironment, ResolvedConfig, ViteDevServer } from 'vite'
+import type { ModuleRunner } from 'vite/module-runner'
+import { renderToString } from '../../jsx/mod.ts'
+import type { SSRRootProps } from '../../core/types.ts'
+import { Fragment } from '../../jsx/jsx-dev-runtime.ts'
+import { createRoutes, type RouteEntry } from '../utils/routing.ts'
+import type { DevClientInfo } from '../../core/dev-client/types.ts'
+
+interface DevAppInit {
+  resolvedConfig: ResolvedConfig
+  devServer: ViteDevServer
+  runner: ModuleRunner
+  ssrEnv: DevEnvironment
+}
+
+const createDevApp = async (init: DevAppInit) => {
+  const app = new Hono()
+
+  const createHandler = (entry: RouteEntry) => async (c: Context) => {
+    const [
+      { default: Page },
+      { default: SSRRoot }
+    ] = await Promise.all([
+      await init.runner.import(entry.filePath),
+      await init.runner.import('/app/+ssr-root.tsx')
+    ])
+
+    const page = Page()
+    const parent = SSRRoot({
+      children: page,
+      head: {
+        type: Fragment,
+        isStatic: true,
+        props: {
+          children: [
+            {
+              type: 'script',
+              isStatic: true,
+              props: {
+                children: 'import("/@vite/client")'
+              } 
+            },
+            {
+              type: 'script',
+              props: {
+                type: 'module',
+                src: '/app/+client.dev.tsx'
+              }
+            },
+            {
+              type: 'script',
+              isStatic: true,
+              props: {
+                type: 'text/eclipsa+devinfo',
+                id: 'eclipsa-devinfo',
+                children: JSON.stringify({
+                  filePath: entry.filePath
+                } satisfies DevClientInfo)
+              }
+            }
+          ]
+        }
+      }
+    } satisfies SSRRootProps)
+  
+    return c.html(renderToString(parent))
+  }
+
+  for (const entry of await createRoutes(init.resolvedConfig.root)) {
+    app.get(entry.honoPath, createHandler(entry))
+  }
+
+  return app
+}
+export const createDevFetch = (
+  init: DevAppInit,
+): (req: Request) => Promise<Response | undefined> => {
+  let app = createDevApp(init)
+
+  return async (req) => {
+    const fetched = await (await app).fetch(req)
+    if (fetched.status === 404) {
+      return
+    }
+    return fetched
+  }
+}

package/vite/mod.ts

@@ -0,0 +1,76 @@
+import {
+  createServerModuleRunner,
+  DevEnvironment,
+  type Plugin,
+  type ResolvedConfig,
+} from 'vite'
+import { createDevFetch } from './dev-app/mod.ts'
+import {
+  incomingMessageToRequest,
+  responseForServerResponse,
+} from '../utils/node-connect.ts'
+import { transformJSX } from '../transformers/dev-ssr/mod.ts'
+import { transformClientDevJSX } from '../transformers/dev-client/mod.ts'
+
+export const eclipsa = (): Plugin => {
+  let config: ResolvedConfig
+  return {
+    name: 'vite-plugin-eclipsa',
+    config() {
+      return {
+        esbuild: {
+          jsxFactory: 'jsx',
+          jsxImportSource: '@xely/eclipsa',
+          jsx: 'preserve',
+        },
+        //environments: {
+         /* ssr: {
+            dev: {
+              createEnvironment(name, config, _context) {
+                return new DevEnvironment(name, config, {
+                  hot: false,
+                })
+              },
+            },
+          },*/
+       // },
+      }
+    },
+    configResolved(resolvedConfig) {
+      config = resolvedConfig
+    },
+    configureServer(server) {
+      const ssrEnv = server.environments.ssr
+      const runner = createServerModuleRunner(ssrEnv, {
+        hmr: false,
+      })
+      const devFetch = createDevFetch({
+        resolvedConfig: config,
+        devServer: server,
+        runner,
+        ssrEnv,
+      })
+      server.middlewares.use(async (req, res, next) => {
+        const webReq = incomingMessageToRequest(req)
+        const webRes = await devFetch(webReq)
+        if (webRes) {
+          responseForServerResponse(webRes, res)
+          return
+        }
+        next()
+      })
+    },
+    hotUpdate(options) {
+      options.server.hot.send({ type: 'full-reload' })
+    },
+    transform(code, id) {
+      if (id.endsWith('.tsx')) {
+        const result = (this.environment.name === 'ssr' ? transformJSX : transformClientDevJSX)(code)
+        return {
+          code: result
+        }
+      }
+      return
+    },
+  }
+}

package/vite/utils/routing.ts

@@ -0,0 +1,26 @@
+import fg from 'fast-glob'
+import path from 'node:path'
+
+// WIP
+const filePathToHonoPath = (filePath: string) => {
+  const segments = filePath.split('/').slice(0, -1)
+
+  return segments.join('/') || '/'
+}
+
+export interface RouteEntry {
+  filePath: string
+  honoPath: string
+}
+export const createRoutes = async (root: string): Promise<RouteEntry[]> => {
+  const appDir = path.join(root, 'app')
+  const result = []
+  for await (const entry of fg.stream(path.join(root, '/**/+page.tsx'))) {
+    const relativePath = path.relative(appDir, entry.toString())
+    result.push({
+      filePath: entry.toString(),
+      honoPath: filePathToHonoPath(relativePath)
+    })
+  }
+  return result
+}