epos 1.1.9 → 1.2.1

package/package.json

@@ -1,11 +1,17 @@
 {
   "name": "epos",
-  "version": "1.1.9",
+  "version": "1.2.1",
   "author": "imkost",
   "description": "",
   "keywords": [],
   "license": "MIT",
   "type": "module",
+  "scripts": {
+    "dev": "node ./src/kit/kit-bin.js"
+  },
+  "bin": {
+    "epos": "./src/kit/kit-bin.js"
+  },
   "exports": {
     ".": {
       "types": "./src/types/types.d.ts"
@@ -13,11 +19,10 @@
     "./plugin-vite": "./src/plugin-vite.js",
     "./plugin-esbuild": "./src/plugin-esbuild.js"
   },
-  "bin": {
-    "epos": "./src/kit/kit-bin.js"
-  },
   "devDependencies": {
     "chokidar": "^4.0.3",
+    "glob": "^11.0.1",
+    "ignore": "^7.0.3",
     "js-yaml": "^4.1.0",
     "mime": "^4.0.6",
     "prettier": "^3.4.2",

package/src/bridge/bridge-mobx-react.js

@@ -14,7 +14,7 @@ const {
   useLocalStore,
   useObserver,
   useStaticRendering,
-} = self.mobxReact
+} = Self.mobxReact
 
 export {
   MobXProviderContext,

package/src/bridge/bridge-mobx.js

@@ -67,7 +67,7 @@ const {
   untracked,
   values,
   when,
-} = self.mobx
+} = Self.mobx
 
 export {
   $mobx,

package/src/bridge/bridge-react-dom-client.js

@@ -1,4 +1,4 @@
-const reactDomClient = self.reactDomClient
+const reactDomClient = Self.reactDomClient
 const { createRoot, hydrateRoot, version } = reactDomClient
 
 export default reactDomClient

package/src/bridge/bridge-react-dom.js

@@ -1,4 +1,4 @@
-const reactDom = self.reactDom
+const reactDom = Self.reactDom
 const {
   __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
   createPortal,

package/src/bridge/bridge-react-jsx-runtime.js

@@ -1,4 +1,4 @@
-const reactJsxRuntime = self.reactJsxRuntime
+const reactJsxRuntime = Self.reactJsxRuntime
 const { Fragment, jsx, jsxs } = reactJsxRuntime
 
 export default reactJsxRuntime

package/src/bridge/bridge-react.js

@@ -1,4 +1,4 @@
-const react = self.react
+const react = Self.react
 const {
   Children,
   Component,

package/src/kit/kit-bin.js

@@ -1,106 +1,8 @@
 #!/usr/bin/env node
 
-import $fs from 'node:fs/promises'
-import $path from 'path'
-import $http from 'node:http'
-import $mime from 'mime'
-import $yaml from 'js-yaml'
-import $chokidar from 'chokidar'
-import * as $ws from 'ws'
+import $server from './kit-server.js'
 
-const $server = {
-  async init() {
-    const dir = process.cwd()
-    const dirs = await this._findManifestDirs(dir)
-    await this._start(dirs)
-
-    const server = $http.createServer(async (req, res) => {
-      const pkgName = req.url.split('/')[1]
-      const dir = dirs.find(({ name }) => name === pkgName)
-      if (!dir) {
-        res.writeHead(404, { 'Content-Type': 'text/plain' })
-        res.end('404: File Not Found')
-        return
-      }
-      const path = req.url.split('/').slice(2).join('/')
-      const filePath = $path.join(dir.dir, path)
-      const contentType = $mime.getType(filePath) || 'application/octet-stream'
-
-      try {
-        const data = await $fs.readFile(filePath)
-        res.writeHead(200, { 'Content-Type': contentType })
-        res.end(data)
-      } catch (e) {
-        if (e.code === 'ENOENT') {
-          res.writeHead(404, { 'Content-Type': 'text/plain' })
-          res.end('404: File Not Found')
-        } else {
-          res.writeHead(500, { 'Content-Type': 'text/plain' })
-          res.end('500: Internal Server Error')
-        }
-      }
-    })
-
-    const PORT = 3098
-    server.listen(PORT, () => {
-      console.log(`Server running at http://localhost:${PORT}/`)
-    })
-  },
-
-  async _findManifestDirs(dir) {
-    const results = []
-    const variants = ['epos.json', 'epos.yaml', 'epos.yml']
-    const entries = await $fs.readdir(dir, { withFileTypes: true })
-
-    const manifestEntry = entries.find(e => e.isFile() && variants.includes(e.name))
-    if (manifestEntry) {
-      const path = $path.join(dir, manifestEntry.name)
-      const content = await $fs.readFile(path, 'utf-8')
-      const isJson = path.endsWith('.json')
-      const manifest = isJson ? JSON.parse(content) : $yaml.load(content)
-      if (!manifest.name) throw new Error(`no name in ${path}`)
-      results.push({ name: manifest.name, dir })
-    }
-
-    for (const entry of entries) {
-      if (!entry.isDirectory()) continue
-      if (entry.name.startsWith('.')) continue
-      if (entry.name === 'node_modules') continue
-      const subDir = $path.join(dir, entry.name)
-      const subResults = await this._findManifestDirs(subDir)
-      results.push(...subResults)
-    }
-
-    return results
-  },
-
-  async _start(dirs, port = 3099) {
-    const wss = new $ws.WebSocketServer({ port }, () => {
-      console.log(`WebSocket server started on ws://localhost:${port}`)
-    })
-
-    const manifestDirs = dirs
-
-    manifestDirs.forEach(({ dir, name }) => {
-      const watcher = $chokidar.watch(dir, {
-        ignored: /(node_modules|\.git)/,
-        ignoreInitial: true,
-      })
-
-      const broadcast = path => {
-        console.log('change', path)
-        const data = JSON.stringify({ name, path: $path.relative(dir, path) })
-        for (const client of wss.clients) {
-          if (client.readyState !== 1) continue
-          client.send(data)
-        }
-      }
-
-      watcher.on('add', p => broadcast(p))
-      watcher.on('change', p => broadcast(p))
-      watcher.on('unlink', p => broadcast(p))
-    })
-  },
-}
-
-$server.init()
+run: (async () => {
+  const dir = process.argv[2] || process.cwd()
+  await $server.init(dir)
+})()

package/src/kit/kit-server.js

@@ -0,0 +1,131 @@
+import $fs from 'node:fs/promises'
+import $path from 'path'
+import $http from 'node:http'
+import $mime from 'mime'
+import $yaml from 'js-yaml'
+import $chokidar from 'chokidar'
+import * as $ws from 'ws'
+
+const $server = {
+  async init(dir = '/Users/imkost/z/epos') {
+    this._dir = dir
+    this._wsPort = 2217
+    this._httpPort = 2218
+    this._maxFiles = 10_000
+    this._pkgs = {} // { [path]: { name, dir, watcher } }
+    await this._start()
+  },
+
+  async _start() {
+    const watcherReady = Promise.withResolvers()
+    const httpServerReady = Promise.withResolvers()
+
+    const wss = new $ws.WebSocketServer({ port: this._wsPort })
+    const watcher = $chokidar.watch(this._dir, { ignored: this._ignored })
+
+    // initial scan
+    let isInitialScan = true
+    let initialFileCount = 0
+    watcher.on('all', async (event, path) => {
+      if (!isInitialScan) return
+      initialFileCount += 1
+      if (initialFileCount < this._maxFiles) return
+      console.error('⛔ too many files')
+      console.error(`More than ${this._maxFiles} files in the directory.`)
+      console.error(`Please point to a directory with less files.`)
+      process.exit()
+    })
+    watcher.on('ready', () => {
+      isInitialScan = false
+      watcherReady.resolve()
+    })
+
+    // watch added manifest files
+    const variants = new Set(['epos.json', 'epos.yaml', 'epos.yml'])
+    watcher.on('add', async path => {
+      const isEposManifest = variants.has($path.basename(path))
+      if (!isEposManifest) return
+      const pkg = await this._createPkgWatcher(path, wss)
+      if (!pkg) return
+      this._pkgs[path] = pkg
+    })
+
+    // watch removed manifest files
+    watcher.on('unlink', path => {
+      if (!this._pkgs[path]) return
+      this._pkgs[path].watcher.close()
+      delete this._pkgs[path]
+    })
+
+    // static server
+    const httpServer = $http.createServer(async (req, res) => {
+      const pkgName = req.url.split('/')[1]
+      const pkg = Object.values(this._pkgs).find(p => p.name === pkgName)
+      if (!pkg) {
+        res.writeHead(404, { 'Content-Type': 'text/plain' })
+        res.end('404: File Not Found')
+        return
+      }
+
+      const filePath = $path.join(pkg.dir, req.url.split('/').slice(2).join('/'))
+      const contentType = $mime.getType(filePath) || 'application/octet-stream'
+      try {
+        const data = await $fs.readFile(filePath)
+        res.writeHead(200, { 'Content-Type': contentType })
+        res.end(data)
+      } catch (e) {
+        if (e.code === 'ENOENT') {
+          res.writeHead(404, { 'Content-Type': 'text/plain' })
+          res.end('404: File Not Found')
+        } else {
+          res.writeHead(500, { 'Content-Type': 'text/plain' })
+          res.end('500: Internal Server Error')
+        }
+      }
+    })
+    httpServer.listen(this._httpPort, () => {
+      httpServerReady.resolve()
+    })
+
+    await watcherReady.promise
+    await httpServerReady.promise
+
+    console.log('⚡ running')
+  },
+
+  async _createPkgWatcher(manifestPath, wss) {
+    const isJson = manifestPath.endsWith('.json')
+    const content = await $fs.readFile(manifestPath, 'utf-8')
+    const manifest = isJson ? JSON.parse(content) : $yaml.load(content)
+    const pkgName = manifest.name
+    if (!pkgName) return null
+
+    const dir = $path.dirname(manifestPath)
+    const watcher = $chokidar.watch(dir, {
+      ignored: this._ignored,
+      ignoreInitial: true,
+    })
+
+    watcher.on('all', (event, path) => {
+      const data = JSON.stringify({ name: pkgName, path: $path.relative(dir, path) })
+      for (const client of wss.clients) {
+        if (client.readyState !== 1) continue
+        client.send(data)
+      }
+    })
+
+    return {
+      watcher,
+      name: pkgName,
+      dir,
+    }
+  },
+
+  _ignored(path) {
+    if (path.includes('node_modules')) return true
+    if ($path.basename(path).startsWith('.')) return true
+    return false
+  },
+}
+
+export default $server

package/src/types/types.d.ts

@@ -1,103 +1,61 @@
-declare var Self: {
-  // base
+declare var self: EposSelf
+declare var Self: EposSelf
+
+interface EposSelf {
   name: string
-  state: { [key: string]: any }
-  storage: EposStorage
+  state: Record<string, any>
+  tabId: number
+  browser: Record<string, any>
+  root: HTMLElement
+  shadow: ShadowRoot
+
   on: (event: string, callback: (...args: any[]) => any) => void
   off: (event: string, callback?: (...args: any[]) => any) => void
   send: (event: string, ...args: any[]) => Promise<any>
   call: (event: string, ...args: any[]) => Promise<any>
-  tabId: number
-  browser: { [key: string]: any }
-  is: { tab: boolean; popup: boolean; sidePanel: boolean; background: boolean }
-  use: (packageName: string) => any
-
-  // ui
+  use: (pkgName: string) => any
+  fetch: (url: string, opts?: object) => Promise<object>
   render: (what: any, container?: HTMLElement | ShadowRoot) => void
-  portal: (vnode: Object, container: HTMLElement | ShadowRoot) => void
-  component: EposComponent
-  root: HTMLElement
-  shadow: ShadowRoot
-
-  // unit
-  unit: (name: string, schema: EposUnitSchema) => Function
-
-  // files
-  files: EposFiles
-
-  // libs
-  react: Object
-  reactJsxRuntime: Object
-  reactDom: Object
-  reactDomClient: Object
-  mobx: Object
-  mobxReact: Object
+  portal: (vnode: object, container: HTMLElement | ShadowRoot) => void
+
+  unit<T extends Record<string, unknown> & { create?: (...args: any[]) => any }>(
+    name: string,
+    schema: T,
+  ): T['create'] extends (...args: infer P) => any ? (...args: P) => T : () => T
+
+  is: {
+    tab: boolean
+    popup: boolean
+    sidePanel: boolean
+    background: boolean
+  }
+
+  component: {
+    (render: Function): any
+    (name: string, render: Function): any
+    (schema: Record<string, any>): any
+    (name: string, schema: Record<string, any>): any
+  }
+
+  storage: {
+    get(key: string): Promise<any>
+    set(key: string, value: any): Promise<void>
+    keys(): Promise<string[]>
+    remove(key: string): Promise<void>
+    clear(): Promise<void>
+    connect(name: string): Omit<EposSelf['storage'], 'connect'>
+  }
+
+  files: {
+    get: (name: string) => Promise<Blob>
+    url: (name: string) => Promise<string>
+    text: (name: string) => Promise<string>
+  }
+
+  react: object
+  reactJsxRuntime: object
+  reactDom: object
+  reactDomClient: object
+  mobx: object
+  mobxReact: object
 }
-
-// base
-declare var state: typeof Self.state
-declare var storage: typeof Self.storage
-declare var on: typeof Self.on
-declare var off: typeof Self.off
-declare var send: typeof Self.send
-declare var call: typeof Self.call
-declare var is: typeof Self.is
-declare var tabId: typeof Self.tabId
-declare var browser: typeof Self.browser
-declare var use: typeof Self.use
-
-// ui
-declare var render: typeof Self.render
-declare var portal: typeof Self.portal
-declare var component: typeof Self.component
-declare var root: typeof Self.root
-declare var shadow: typeof Self.shadow
-
-// unit
-declare var unit: typeof Self.unit
-
-// files
-declare var files: typeof Self.files
-
-// libs
-declare var react: typeof Self.react
-declare var reactJsxRuntime: typeof Self.reactJsxRuntime
-declare var reactDom: typeof Self.reactDom
-declare var reactDomClient: typeof Self.reactDomClient
-declare var mobx: typeof Self.mobx
-declare var mobxReact: typeof Self.mobxReact
-
-type EposStorage = EposStorageBase & {
-  connect: (name: string) => EposStorageBase
-}
-
-type EposStorageBase = {
-  get: (key: string) => Promise<any>
-  set: (key: string, value: any) => Promise<void>
-  keys: () => Promise<string[]>
-  remove: (key: string) => Promise<void>
-  clear: () => Promise<void>
-}
-
-// type EposComponent = {
-//   (name: number, schema: EposComponentSchema): any
-//   (name: number, render: Function): any
-//   (schema: EposComponentSchema): any
-//   (render: Function): any
-// }
-type EposComponent = (name: number) => any
-
-type EposComponentSchema = {}
-
-type EposUnitSchema = {}
-
-type EposFiles = {
-  get: (name: string) => Promise<Blob>
-  url: (name: string) => Promise<string>
-  text: (name: string) => Promise<string>
-}
-
-// declare function unit<T extends { constructor: (...args: any[]) => void }>(
-//   name: string,
-//   definition: T & ThisType<T>,
-// ): (...args: Parameters<T['constructor']>) => T