airx 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Xulai (Alain) Yin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,29 @@
+# airx
+
+Arix is a front-end framework based on JSX, but it doesn't have hooks like React.
+
+## Use
+
+```tsx
+import * as airx from 'airx'
+
+const outsideCount = airx.createRef(1)
+
+function App() {
+  const innerCount = airx.createRef(1)
+
+  const handleClick = () => {
+    innerCount.value += 1
+    outsideCount.value +=1
+  }
+
+  return () => (
+    <button onClick={handleClick}>
+      {innerCount.value}
+      {outsideCount.value}
+    </button>
+  )
+}
+
+airx.createApp(<App />).mount(document.getElementById('app'))
+```

package/output/element.d.ts

@@ -0,0 +1,40 @@
+import * as symbol from './symbol';
+type AirxElementType<P> = string | AirxComponent<P>;
+/**
+ * AirxElement 表示一个 Airx 元素
+ * type 表示元素的类型，可能是一个 html 标签，
+ * 也可能是一个自定义组件
+ * props 表示元素的属性
+ * children 表示元素的子元素
+ */
+export interface AirxElement<P = unknown> {
+    type: AirxElementType<P>;
+    props: {
+        [propKey: string]: unknown;
+    };
+    [symbol.airxElementSymbol]: true;
+}
+export type AirxChildren = null | string | number | boolean | undefined | AirxElement<never> | Array<AirxElement<never>>;
+/**
+ * 函数式组件接收自己的 props，并返回一个 AirxElement
+ */
+export type AirxComponent<P = unknown> = (props: P, ctx: AirxComponentContext) => AirxComponentRender;
+export type AirxComponentRender = () => AirxChildren;
+/**
+ * createElement 是用于创建 AirxElement 的工具函数
+ */
+export declare function createElement<P = unknown>(type: AirxElementType<P>, props: {
+    [key: string]: unknown;
+} & P, ...children: AirxChildren[]): AirxElement<P>;
+export declare function isValidElement(element: unknown): element is AirxElement;
+export declare function Fragment(props: {
+    children: AirxElement;
+}): () => AirxElement<unknown>;
+export type AirxComponentUnmountedListener = () => void;
+export type AirxComponentMountedListener = () => () => void | void;
+export interface AirxComponentLifecycle {
+    onMounted: (listener: AirxComponentMountedListener) => void;
+    onUnmounted: (listener: AirxComponentUnmountedListener) => void;
+}
+export type AirxComponentContext = AirxComponentLifecycle;
+export {};

package/output/element.js

@@ -0,0 +1,23 @@
+import * as symbol from './symbol';
+/**
+ * createElement 是用于创建 AirxElement 的工具函数
+ */
+export function createElement(type, props, ...children) {
+    return {
+        type,
+        props: {
+            ...props,
+            children
+        },
+        [symbol.airxElementSymbol]: true
+    };
+}
+export function isValidElement(element) {
+    return typeof element === 'object'
+        && element !== null
+        && Reflect.get(element, symbol.airxElementSymbol);
+}
+export function Fragment(props) {
+    return () => props.children;
+}
+//# sourceMappingURL=element.js.map

package/output/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","sourceRoot":"","sources":["../source/element.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,UAAU,CAAA;AAgClC;;GAEG;AACH,MAAM,UAAU,aAAa,CAC3B,IAAwB,EACxB,KAAqC,EACrC,GAAG,QAAwB;IAE3B,OAAO;QACL,IAAI;QACJ,KAAK,EAAE;YACL,GAAG,KAAK;YACR,QAAQ;SACT;QACD,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,IAAI;KACjC,CAAA;AACH,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,OAAgB;IAC7C,OAAO,OAAO,OAAO,KAAK,QAAQ;WAC7B,OAAO,KAAK,IAAI;WAChB,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,iBAAiB,CAAC,CAAA;AACrD,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,KAAgC;IACvD,OAAO,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAA;AAC7B,CAAC"}

package/output/index.d.ts

@@ -0,0 +1,11 @@
+import { Plugin } from './plugin';
+import { AirxElement } from './element';
+export * from './types';
+export { render } from './render';
+export { createRef } from './reactive';
+export { Fragment, createElement, AirxComponent, AirxElement, AirxChildren, AirxComponentContext } from './element';
+export interface AirxApp {
+    plugin: (plugins: Plugin[]) => AirxApp;
+    mount: (container: HTMLElement) => AirxApp;
+}
+export declare function createApp(element: AirxElement<any>): AirxApp;

package/output/index.js

@@ -0,0 +1,20 @@
+import { render } from './render';
+export * from './types';
+export { render } from './render';
+export { createRef } from './reactive';
+export { Fragment, createElement } from './element';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function createApp(element) {
+    const app = {
+        plugin: (plugins) => {
+            console.log(plugins);
+            return app;
+        },
+        mount: (container) => {
+            render(element, container);
+            return app;
+        }
+    };
+    return app;
+}
+//# sourceMappingURL=index.js.map

package/output/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../source/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,cAAc,SAAS,CAAA;AAEvB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AACtC,OAAO,EACL,QAAQ,EACR,aAAa,EAKd,MAAM,WAAW,CAAA;AAQlB,8DAA8D;AAC9D,MAAM,UAAU,SAAS,CAAC,OAAyB;IACjD,MAAM,GAAG,GAAY;QACnB,MAAM,EAAE,CAAC,OAAO,EAAE,EAAE;YAClB,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;YACpB,OAAO,GAAG,CAAA;QACZ,CAAC;QAED,KAAK,EAAE,CAAC,SAAsB,EAAE,EAAE;YAChC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;YAC1B,OAAO,GAAG,CAAA;QACZ,CAAC;KACF,CAAA;IAED,OAAO,GAAG,CAAA;AACZ,CAAC"}

package/output/logger.d.ts

@@ -0,0 +1,3 @@
+export declare function createLogger(name: string): {
+    debug: (...args: unknown[]) => void;
+};

package/output/logger.js

@@ -0,0 +1,13 @@
+const isDev = localStorage.getItem('airx-dev');
+export function createLogger(name) {
+    function getPrintPrefix() {
+        const date = new Date().toLocaleString();
+        return `[${date}][${name}]`;
+    }
+    function debug(...args) {
+        if (isDev)
+            console.log(getPrintPrefix(), ...args);
+    }
+    return { debug };
+}
+//# sourceMappingURL=logger.js.map

package/output/logger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.js","sourceRoot":"","sources":["../source/logger.ts"],"names":[],"mappings":"AAAA,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;AAC9C,MAAM,UAAU,YAAY,CAAC,IAAY;IACvC,SAAS,cAAc;QACrB,MAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC,cAAc,EAAE,CAAA;QACxC,OAAO,IAAI,IAAI,KAAK,IAAI,GAAG,CAAA;IAC7B,CAAC;IAED,SAAS,KAAK,CAAC,GAAG,IAAe;QAC/B,IAAI,KAAK;YAAE,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,EAAE,GAAG,IAAI,CAAC,CAAA;IACnD,CAAC;IAED,OAAO,EAAE,KAAK,EAAE,CAAA;AAClB,CAAC"}

package/output/plugin.d.ts

@@ -0,0 +1,2 @@
+export interface Plugin {
+}

package/output/plugin.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=plugin.js.map

package/output/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../source/plugin.ts"],"names":[],"mappings":""}

package/output/reactive.d.ts

@@ -0,0 +1,10 @@
+export declare function createCollector(): {
+    complete: () => Ref<unknown>[];
+    collect: <R = unknown>(process: () => R) => R;
+};
+interface Ref<T = unknown> {
+    value: T;
+}
+export declare function watch<T = unknown>(ref: Ref<T>, listener: () => unknown): () => void;
+export declare function createRef<T>(obj: T): Ref<T>;
+export {};

package/output/reactive.js

@@ -0,0 +1,67 @@
+import * as symbol from './symbol';
+/** TODO: 污染全局总是不好的 */
+const globalContext = {
+    dependencies: new Set()
+};
+export function createCollector() {
+    const newDependencies = new Set();
+    return {
+        complete: () => [...newDependencies.values()],
+        collect: (process) => {
+            const beforeDeps = globalContext.dependencies;
+            globalContext.dependencies = newDependencies;
+            const result = process();
+            globalContext.dependencies = beforeDeps;
+            return result;
+        }
+    };
+}
+function triggerRef(ref) {
+    requestAnimationFrame(() => {
+        const deps = Reflect.get(ref, symbol.airxReactiveDependenciesSymbol);
+        for (const dep of deps) {
+            dep();
+        }
+    });
+}
+function createRefObject(value) {
+    const object = Object.create({ value });
+    Reflect.defineProperty(object, symbol.airxReactiveDependenciesSymbol, {
+        configurable: false,
+        enumerable: false,
+        writable: true,
+        value: new Set()
+    });
+    return object;
+}
+function isRefObject(obj) {
+    return obj != null
+        && typeof obj === 'object'
+        && Reflect.has(obj, symbol.airxReactiveDependenciesSymbol);
+}
+export function watch(ref, listener) {
+    const deps = Reflect.get(ref, symbol.airxReactiveDependenciesSymbol);
+    deps.add(listener);
+    return () => { deps.delete(listener); };
+}
+export function createRef(obj) {
+    const ref = isRefObject(obj) ? obj : createRefObject(obj);
+    if (!globalContext.dependencies.has(ref)) {
+        globalContext.dependencies.add(ref);
+    }
+    return new Proxy(ref, {
+        get(target, key, receiver) {
+            const result = Reflect.get(target, key, receiver);
+            if (!globalContext.dependencies.has(ref)) {
+                globalContext.dependencies.add(ref);
+            }
+            return result;
+        },
+        set(target, key, value, receiver) {
+            const result = Reflect.set(target, key, value, receiver);
+            triggerRef(target);
+            return result;
+        },
+    });
+}
+//# sourceMappingURL=reactive.js.map

package/output/reactive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactive.js","sourceRoot":"","sources":["../source/reactive.ts"],"names":[],"mappings":"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"}

package/output/render.d.ts

@@ -0,0 +1,41 @@
+import { AirxElement, AirxComponentRender, AirxComponentContext, AirxComponentMountedListener, AirxComponentUnmountedListener } from './element';
+export type Disposer = () => void;
+declare class InnerAirxComponentContext implements AirxComponentContext {
+    private disposers;
+    private mountListeners;
+    private unmountedListeners;
+    triggerMounted(): void;
+    triggerUnmounted(): void;
+    onMounted(listener: AirxComponentMountedListener): void;
+    onUnmounted(listener: AirxComponentUnmountedListener): void;
+    addDisposer(...disposers: Disposer[]): void;
+    dispose(): void;
+    /**
+     * 当 context 传递给外部消费时，隐藏内部实现，仅暴露接口定义的内容
+     * @returns 和 AirxComponentContext 接口完全一致的对象
+     */
+    getSafeContext(): AirxComponentContext;
+}
+/**
+ * 树结构
+ * instance ←--------------
+ *  |    ↑                 ↑
+ * child parent           parent
+ *  ↓    |                 |
+ * instance  -sibling→  instance...
+ */
+interface Instance {
+    domRef?: HTMLElement;
+    child?: Instance;
+    parent?: Instance;
+    sibling?: Instance;
+    deletions?: Set<Instance>;
+    element?: AirxElement;
+    beforeElement?: AirxElement;
+    render?: AirxComponentRender;
+    memoProps?: object;
+    requiredUpdate?: boolean;
+    context: InnerAirxComponentContext;
+}
+export declare function render(element: AirxElement, domRef: HTMLElement): Instance;
+export {};