rename reactive named exports

README.md

@@ -7,16 +7,20 @@ Arix is a front-end framework based on JSX, but it doesn't have hooks like React
 ```tsx
 import * as airx from 'airx'
 
-const outsideCount = airx.createRef(1)
+// create a reaction value
+const outsideCount = airx.createSignal(1)
 
+// define a component
 function App() {
-  const innerCount = airx.createRef(1)
+  // create a reaction value
+  const innerCount = airx.createSignal(1)
 
   const handleClick = () => {
     innerCount.value += 1
     outsideCount.value +=1
   }
 
+  // return a render function
   return () => (
     <button onClick={handleClick}>
       {innerCount.value}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "airx",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "a front framework with jsx",
   "types": "./output/index.d.ts",
   "exports": {

source/element.ts

@@ -1,8 +1,9 @@
-import { Ref } from './reactive'
 import * as symbol from './symbol'
 
 type AirxElementType<P> = string | AirxComponent<P>
 
+export type Props = { [propKey: string]: unknown }
+
 /**
  * AirxElement 表示一个 Airx 元素
  * type 表示元素的类型，可能是一个 html 标签，
@@ -13,7 +14,7 @@ type AirxElementType<P> = string | AirxComponent<P>
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface AirxElement<P = any> {
   type: AirxElementType<P>
-  props: { [propKey: string]: unknown } & P
+  props: Props & P
   [symbol.airxElementSymbol]: true
 }
 
@@ -29,8 +30,9 @@ export type AirxChildren =
 /**
  * 函数式组件接收自己的 props，并返回一个 AirxElement
  */
-export type AirxComponent<P = unknown> = (props: P) => AirxComponentRender
 export type AirxComponentRender = () => AirxChildren
+export type AirxComponent<P = unknown> = ReactiveComponent<P>
+export type ReactiveComponent<P = unknown> = (props: P) => AirxComponentRender
 
 /**
  * createElement 是用于创建 AirxElement 的工具函数
@@ -71,7 +73,11 @@ export interface AirxComponentLifecycle {
 
 export type AirxComponentContext = AirxComponentLifecycle & {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  provide: <T = any>(key: any, value: T) => (newValue: T) => void
+  provide: <T = unknown>(key: unknown, value: T) => (newValue: T) => void
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  inject: <T = any>(key: any) => Ref<T | null>
+  inject: <T = unknown>(key: unknown) => T | undefined
+}
+
+export function component<P = unknown>(comp: AirxComponent<P>): AirxComponent<P> {
+  return comp
 }

source/index.ts

@@ -1,12 +1,13 @@
 import { AirxElement } from './element'
-import { renderToDom } from './render'
+import { Plugin, PluginContext, render } from './render'
 
 export * from './types'
-
-export { createRef, Ref, watch } from './reactive'
+export { Plugin } from './render'
+export { createSignal, Signal, watchSignal } from './reactive'
 
 export {
   Fragment,
+  component,
   createElement,
   AirxComponent,
   AirxElement,
@@ -22,20 +23,21 @@ export {
 } from './render'
 
 export interface AirxApp {
-  // plugin: (plugins: Plugin[]) => AirxApp
+  plugin: (...plugins: Plugin[]) => AirxApp
   mount: (container: HTMLElement) => AirxApp
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function createApp(element: AirxElement<any>): AirxApp {
+  const appContext = new PluginContext()
   const app: AirxApp = {
-    // plugin: (plugins) => {
-    //   console.log(plugins)
-    //   return app
-    // },
+    plugin: (...plugins: Plugin[]) => {
+      appContext.registerPlugin(...plugins)
+      return app
+    },
 
     mount: (container: HTMLElement) => {
-      renderToDom(element, container)
+      render(appContext, element, container)
       return app
     }
   }

source/reactive.ts

@@ -1,13 +1,14 @@
 import * as symbol from './symbol'
 
-/** TODO: 污染全局总是不好的 */
+/** FIXME: 污染全局总是不好的 */
 const globalContext = {
-  dependencies: new Set<Ref<unknown>>()
+  dependencies: new Set<Signal<unknown>>()
 }
 
 export function createCollector() {
-  const newDependencies = new Set<Ref<unknown>>()
+  const newDependencies = new Set<Signal<unknown>>()
   return {
+    clear: () => newDependencies.clear(),
     complete: () => [...newDependencies.values()],
     collect: <R = unknown>(process: () => R) => {
       const beforeDeps = globalContext.dependencies
@@ -19,7 +20,7 @@ export function createCollector() {
   }
 }
 
-function triggerRef<T = unknown>(ref: Ref<T>) {
+function triggerRef<T = unknown>(ref: Signal<T>) {
   requestAnimationFrame(() => {
     const deps = Reflect.get(ref, symbol.airxReactiveDependenciesSymbol)
     for (const dep of deps) {
@@ -28,11 +29,11 @@ function triggerRef<T = unknown>(ref: Ref<T>) {
   })
 }
 
-export interface Ref<T = unknown> {
+export interface Signal<T = unknown> {
   value: T
 }
 
-function createRefObject<T = unknown>(value: T): Ref<T> {
+function createRefObject<T = unknown>(value: T): Signal<T> {
   const object = Object.create({ value })
 
   Reflect.defineProperty(object, symbol.airxReactiveDependenciesSymbol, {
@@ -45,13 +46,13 @@ function createRefObject<T = unknown>(value: T): Ref<T> {
   return object
 }
 
-export function watch<T = unknown>(ref: Ref<T>, listener: () => unknown) {
+export function watchSignal<T = unknown>(ref: Signal<T>, listener: () => unknown) {
   const deps: Set<() => unknown> = Reflect.get(ref, symbol.airxReactiveDependenciesSymbol)
   deps.add(listener)
   return () => { deps.delete(listener) }
 }
 
-export function createRef<T>(obj: T): Ref<T> {
+export function createSignal<T>(obj: T): Signal<T> {
   const ref = createRefObject(obj)
 
   if (!globalContext.dependencies.has(ref)) {