@psytask/core 1.1.4 → 1.2.1

package/dist/index.d.ts

@@ -100,9 +100,9 @@ type Component<P extends LooseObject = any, D extends LooseObject = LooseObject
         data: () => D;
     };
 };
-type SceneShow<P extends LooseObject = LooseObject, D extends LooseObject = LooseObject & ForbiddenData> = (patchProps?: Partial<P>) => Promise<Merge<D, BuiltinData>>;
-/** Same with {@link SceneShow} */
-type GenericComponent<P extends LooseObject = LooseObject, D extends LooseObject = LooseObject & ForbiddenData> = SceneShow<P, D>;
+type GenericComponent<P extends LooseObject = LooseObject, D extends LooseObject = LooseObject & ForbiddenData> = (patchProps?: Partial<P>, 
+/** NOTE: only for type hint */
+__rawProps?: P) => Promise<Merge<D, BuiltinData>>;
 /**
  * Provide type infer for generic component, do nothing in runtime.
  *
@@ -124,12 +124,40 @@ declare const generic: {
 };
 /** @ignore */
 type MaybeGenericComponent<P extends LooseObject = any, D extends LooseObject & ForbiddenData = {}> = Component<P, D> | GenericComponent<P, D>;
+/**
+ * @example
+ *
+ * Must be called on the top scope of component
+ *
+ * ```ts
+ * const Component = (props: {}) => {
+ *   const ctx = getCurrentScene();
+ *   return '';
+ * };
+ * ```
+ *
+ * DO NOT call on other place
+ *
+ * ```ts
+ * const Component = (props: {}) => {
+ *   const fn = () => {
+ *     const ctx = getCurrentScene(); // WRONG!
+ *   };
+ *   return '';
+ * };
+ * ```
+ */
+declare const getCurrentScene: () => Scene<MaybeGenericComponent<any, {}>>;
+declare const ReactiveFn: unique symbol;
+type ComponentFlags = {
+    [ReactiveFn]?: <T extends LooseObject>(obj: T) => T;
+};
 type ComponentAdapter = {
-    /** Wrap a component with reactive props */
-    wrap: <T extends Component>(component: T) => T;
-    /** Render a component with default props and provided scene */
-    render: <T extends Component>(component: T, defaultProps: Parameters<T>[0], 
-    /** If not provided, it will use current scene */
+    /** Mark a component with reactive function */
+    mark: <T extends Component>(component: T & ComponentFlags) => T;
+    /** Call a component with default props and provided scene */
+    render: <T extends Component>(component: T & ComponentFlags, defaultProps: Parameters<T>[0], 
+    /** If not provided, use current scene */
     ctx?: Scene<Component>) => {
         props: Parameters<T>[0];
     } & (ReturnType<T> extends infer R ? R extends {
@@ -143,6 +171,24 @@ type ComponentAdapter = {
         data: undefined;
     } : never);
 };
+/**
+ * Adapte third-part reactive systems
+ *
+ * @example
+ *
+ * With Vue
+ *
+ * ```ts
+ * import { shallowReactive, effect } from '@vue/reactivity';
+ * const adapter = createComponentAdapter(shallowReactive);
+ * const VueComponent = (props: { text: string }) => {
+ *   const node = document.createElement('div');
+ *   effect(() => (node.textContent = props.text));
+ *   return node;
+ * };
+ * const Component = adapter.mark(VueComponent);
+ * ```
+ */
 declare const createComponentAdapter: (reactive: <T extends LooseObject>(obj: T) => T) => ComponentAdapter;
 /**
  * Lifecycle hooks.
@@ -158,36 +204,12 @@ type SceneEventMap = {
     frame: number;
     close: undefined;
 };
-/**
- * @example
- *
- * Must be called on the top scope of component
- *
- * ```ts
- * const Component = (props: {}) => {
- *   const ctx = getCurrentScene();
- *   return '';
- * };
- * ```
- *
- * DO NOT call on other place
- *
- * ```ts
- * const Component = (props: {}) => {
- *   const fn = () => {
- *     const ctx = getCurrentScene(); // WRONG!
- *   };
- *   return '';
- * };
- * ```
- */
-declare const getCurrentScene: () => Scene<MaybeGenericComponent<any, {}>>;
 /** Scene options */
 type SceneOptions<T extends MaybeGenericComponent> = {
     /** Root element */
     root: HTMLDivElement;
     /** Default props */
-    defaultProps: Parameters<T>[0];
+    defaultProps: T extends Component<infer P, infer _> ? P : Parameters<T>[1] & {};
     /** Control show timing */
     timer: () => Timer;
     /** Component adapter */
@@ -197,7 +219,7 @@ declare class Scene<T extends MaybeGenericComponent> extends EventEmitter<SceneE
     #private;
     readonly options: SceneOptions<T>;
     readonly root: HTMLDivElement;
-    readonly data: T extends MaybeGenericComponent<infer P, infer D> ? () => D : undefined;
+    readonly data: T extends MaybeGenericComponent<infer _, infer D> ? () => D : undefined;
     /**
      * Show DOM and update props one-time
      *
@@ -210,13 +232,16 @@ declare class Scene<T extends MaybeGenericComponent> extends EventEmitter<SceneE
      * await scene.show(); // show with default props
      * ```
      */
-    show: T extends Component<infer P, infer D> ? SceneShow<P, D> : T;
+    show: T extends Component<infer P, infer D> ? (patchProps?: Partial<P>) => Promise<Merge<D, BuiltinData>> : T;
     /**
      * @param component - {@link Component}
      * @param options - {@link SceneOptions}
      */
     constructor(component: T, options: SceneOptions<T>);
-    /** Add close task as Microtask if is caled in the frame else next rAF. */
+    /**
+     * If called in frame, close in current frame (as microtask), else in next
+     * frame
+     */
     close(): void;
 }
 

package/dist/index.js

@@ -1,4 +1,4 @@
-/** @psytask/core v1.1.4 cubxx MIT */
+/** @psytask/core v1.2.1 cubxx MIT */
 const symbol = Symbol.dispose ?? /* @__PURE__ */ Symbol.for("Symbol.dispose");
 class EventEmitter {
   listeners = {};
@@ -56,11 +56,19 @@ const createTimer = (shouldStop) => {
   const timer = {
     start: (cb) => new Promise((resolve) => {
       const records = [];
-      currentFrameTime && (records.push(currentFrameTime), cb?.(currentFrameTime));
+      if (currentFrameTime) {
+        records.push(currentFrameTime);
+        cb?.(currentFrameTime);
+      }
       const frame = (time) => {
         const is_stoped = shouldStop(time, records);
         records.push(time);
-        is_stoped ? timer.stop() : (cb?.(time), handle = rAF(frame));
+        if (is_stoped) {
+          timer.stop();
+        } else {
+          handle = rAF(frame);
+          cb?.(time);
+        }
       };
       let handle = rAF(frame);
       timer.stop = () => {
@@ -78,23 +86,28 @@ const generic = (f) => (
   //@ts-expect-error impl generic component
   f
 );
+const sceneStack = [];
+const getCurrentScene = () => sceneStack[sceneStack.length - 1] ?? ERR("Not found current scene");
+const ReactiveFn = /* @__PURE__ */ Symbol();
 const createComponentAdapter = (reactive) => ({
-  wrap: (component) => ((props) => component(reactive(props))),
-  render: (component, defaultProps, ctx) => {
-    const props = reactive(defaultProps);
+  mark(component) {
+    component[ReactiveFn] = reactive;
+    return component;
+  },
+  render(component, defaultProps, ctx) {
+    const rprops = (component[ReactiveFn] ?? reactive)(defaultProps);
     ctx && sceneStack.push(ctx);
-    const instanceOrNode = component(props);
+    const instanceOrNode = component(rprops);
     ctx && sceneStack.pop();
     let data;
     const nodes = array_normalize(
       typeof instanceOrNode !== "string" && "node" in instanceOrNode ? (data = instanceOrNode.data, instanceOrNode.node) : instanceOrNode
     );
-    return { props, nodes, data };
+    return { props: rprops, nodes, data };
   }
 });
-const sceneStack = [];
-const getCurrentScene = () => sceneStack[sceneStack.length - 1] ?? ERR("Not found current scene");
 class Scene extends EventEmitter {
+  // use GenericComponent as Scene.show type
   /**
    * @param component - {@link Component}
    * @param options - {@link SceneOptions}
@@ -106,12 +119,14 @@ class Scene extends EventEmitter {
     (this.root = root).tabIndex = -1;
     root.style.scale = "0";
     const { props, nodes, data } = adapter.render(
+      //@ts-expect-error impl generic component
       component,
       { ...defaultProps },
       this.on("dispose", () => root.remove())
     );
     this.#timer = timer();
-    this.#props = props, this.data = data;
+    this.#props = props;
+    this.data = data;
     root.append(...nodes);
   }
   root;
@@ -130,12 +145,15 @@ class Scene extends EventEmitter {
    * await scene.show(); // show with default props
    * ```
    */
-  //@ts-expect-error impl generic component
+  //@ts-expect-error impl generic show
   show = this.#show;
-  /** Add close task as Microtask if is caled in the frame else next rAF. */
+  /**
+   * If called in frame, close in current frame (as microtask), else in next
+   * frame
+   */
   close() {
-    const t = this.#timer;
-    (currentFrameTime ? queueMicrotask : rAF)(() => t.stop());
+    const ref = this.#timer;
+    (currentFrameTime ? queueMicrotask : rAF)(() => ref.stop());
   }
   async #show(patchProps) {
     const { root, defaultProps } = this.options;

package/dist/index.min.js

@@ -1 +1 @@
-const f=Symbol.dispose??Symbol.for("Symbol.dispose");class l{listeners={};[f](){this.emit("dispose")}on(t,s){return(this.listeners[t]??=new Set).add(s),this}off(t,s){const e=this.listeners[t];return e&&(e.delete(s),e.size||delete this.listeners[t]),this}once(t,s){const e=r=>(this.off(t,e),s(r));return this.on(t,e),this}emit(t,...[s]){const e=this.listeners[t];if(e)for(const r of[...e])r(s);return this}}const y=o=>{throw Error(o)},d=requestAnimationFrame,w=Object,b=(o,t)=>w.assign(o,t),S=document;new Proxy({},{get:(o,t)=>s=>b(S.createElement(t),s)});const g=o=>Array.isArray(o)?o:[o];let c;const m=o=>(c=o,setTimeout(()=>c=0),d(m)),A=o=>{c??m(0);const t={start:s=>new Promise(e=>{const r=[];c&&(r.push(c),s?.(c));const n=a=>{const p=o(a,r);r.push(a),p?t.stop():(s?.(a),i=d(n))};let i=d(n);t.stop=()=>{r.pop(),cancelAnimationFrame(i),e(r)}}),stop(){}};return t},E=o=>o,F=o=>({wrap:t=>(s=>t(o(s))),render:(t,s,e)=>{const r=o(s);e&&h.push(e);const n=t(r);e&&h.pop();let i;const a=g(typeof n!="string"&&"node"in n?(i=n.data,n.node):n);return{props:r,nodes:a,data:i}}}),h=[],P=()=>h[h.length-1]??y("Not found current scene");class k extends l{constructor(t,s){super(),this.options=s;const{root:e,adapter:r,defaultProps:n,timer:i}=s;(this.root=e).tabIndex=-1,e.style.scale="0";const{props:a,nodes:p,data:u}=r.render(t,{...n},this.on("dispose",()=>e.remove()));this.#t=i(),this.#s=a,this.data=u,e.append(...p)}root;#t;#s;data;show=this.#e;close(){const t=this.#t;(c?queueMicrotask:d)(()=>t.stop())}async#e(t){const{root:s,defaultProps:e}=this.options,r={...e,...t};for(const i of Object.keys({...this.#s,...r}))this.#s[i]=r[i];this.emit("show"),s.style.scale="1",s.focus();const n=await this.#t.start(i=>this.emit("frame",i));return s.style.scale="0",{...this.emit("close").data?.(),frame_times:n,duration:c-n[0]}}}export{l as EventEmitter,k as Scene,F as createComponentAdapter,A as createTimer,E as generic,P as getCurrentScene};
+const y=Symbol.dispose??Symbol.for("Symbol.dispose");class p{listeners={};[y](){this.emit("dispose")}on(t,e){return(this.listeners[t]??=new Set).add(e),this}off(t,e){const s=this.listeners[t];return s&&(s.delete(e),s.size||delete this.listeners[t]),this}once(t,e){const s=r=>(this.off(t,s),e(r));return this.on(t,s),this}emit(t,...[e]){const s=this.listeners[t];if(s)for(const r of[...s])r(e);return this}}const w=o=>{throw Error(o)},d=requestAnimationFrame,b=Object,S=(o,t)=>b.assign(o,t),g=document;new Proxy({},{get:(o,t)=>e=>S(g.createElement(t),e)});const A=o=>Array.isArray(o)?o:[o];let c;const m=o=>(c=o,setTimeout(()=>c=0),d(m)),F=o=>{c??m(0);const t={start:e=>new Promise(s=>{const r=[];c&&(r.push(c),e?.(c));const n=a=>{const h=o(a,r);r.push(a),h?t.stop():(i=d(n),e?.(a))};let i=d(n);t.stop=()=>{r.pop(),cancelAnimationFrame(i),s(r)}}),stop(){}};return t},k=o=>o,l=[],E=()=>l[l.length-1]??w("Not found current scene"),u=Symbol(),P=o=>({mark(t){return t[u]=o,t},render(t,e,s){const r=(t[u]??o)(e);s&&l.push(s);const n=t(r);s&&l.pop();let i;const a=A(typeof n!="string"&&"node"in n?(i=n.data,n.node):n);return{props:r,nodes:a,data:i}}});class O extends p{constructor(t,e){super(),this.options=e;const{root:s,adapter:r,defaultProps:n,timer:i}=e;(this.root=s).tabIndex=-1,s.style.scale="0";const{props:a,nodes:h,data:f}=r.render(t,{...n},this.on("dispose",()=>s.remove()));this.#t=i(),this.#s=a,this.data=f,s.append(...h)}root;#t;#s;data;show=this.#e;close(){const t=this.#t;(c?queueMicrotask:d)(()=>t.stop())}async#e(t){const{root:e,defaultProps:s}=this.options,r={...s,...t};for(const i of Object.keys({...this.#s,...r}))this.#s[i]=r[i];this.emit("show"),e.style.scale="1",e.focus();const n=await this.#t.start(i=>this.emit("frame",i));return e.style.scale="0",{...this.emit("close").data?.(),frame_times:n,duration:c-n[0]}}}export{p as EventEmitter,O as Scene,P as createComponentAdapter,F as createTimer,k as generic,E as getCurrentScene};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@psytask/core",
-  "version": "1.1.4",
+  "version": "1.2.1",
   "type": "module",
   "author": "cubxx",
   "license": "MIT",