fix: fix reactive methods

daybrush · Dec 15, 2022 · a0c7e28 · a0c7e28
1 parent 1652d1c
commit a0c7e28
Show file tree

Hide file tree

Showing 11 changed files with 507 additions and 76 deletions.
diff --git a/README.md b/README.md
@@ -68,7 +68,7 @@ $ npm install scenejs
 |[**@scenejs/iframe**](https://github.com/daybrush/scenejs-iframe)|[![](https://img.shields.io/npm/v/@scenejs/iframe.svg?style=flat-square)](https://npmjs.com/package/@scenejs/iframe)|A library that control the animation of iframe with Scene.js.|
 
 
-## 🎬 Make scene
+## 🎬 Make Scene
 ```javascript
 import Scene from "scenejs";
 

diff --git a/package.json b/package.json
@@ -54,6 +54,32 @@
     "workspaces": {
         "packages": [
             "packages/*"
+        ],
+        "nohoist": [
+            "**/@egjs/build-helper",
+            "**/@egjs/build-helper/**",
+            "**/rollup-plugin-vue",
+            "**/rollup-plugin-vue/**",
+            "**/karma",
+            "**/karma/**",
+            "**/karma-*",
+            "**/karma-*/**",
+            "**/@types/chai",
+            "**/@types/chai/**",
+            "**/@types/karma-chai",
+            "**/@types/karma-chai/**",
+            "**/@types/mocha",
+            "**/@types/mocha/**",
+            "**/@vue/*",
+            "**/@vue/*/**",
+            "**/vue",
+            "**/vue/**",
+            "**/@sveltejs/*",
+            "**/@sveltejs/*/**",
+            "**/svelte",
+            "**/svelte/**",
+            "**/vite",
+            "**/vite/**"
         ]
     },
     "resolutions": {
@@ -77,25 +103,5 @@
         "css-styled": "^1.0.0",
         "order-map": "^0.2.2",
         "tslib": "^2.4.0"
-    },
-    "nohoist": [
-        "**/@egjs/build-helper",
-        "**/@egjs/build-helper/**",
-        "**/rollup-plugin-vue",
-        "**/rollup-plugin-vue/**",
-        "**/karma",
-        "**/karma/**",
-        "**/karma-*",
-        "**/karma-*/**",
-        "**/@types/chai",
-        "**/@types/chai/**",
-        "**/@types/karma-chai",
-        "**/@types/karma-chai/**",
-        "**/@types/mocha",
-        "**/@types/mocha/**",
-        "**/@vue/*",
-        "**/@vue/*/**",
-        "**/vue",
-        "**/vue/**"
-    ]
+    }
 }
diff --git a/packages/react-scenejs/README.md b/packages/react-scenejs/README.md
@@ -14,17 +14,17 @@
 <p align="middle"><a href="https://daybrush.com/scenejs"><strong>About Scene.js</strong></a> &nbsp;/&nbsp; <a href="https://daybrush.com/scenejs/release/latest/doc"><strong>API</strong></a> &nbsp;/&nbsp; <a href="https://daybrush.com/scenejs/features.html"><strong>Features</strong></a></p>
 <br/>
 
-## Demos
+## 🚀 Exampless
 * CodeSandbox 1 (Scene)
 * CodeSandbox 2 (Scene / SceneItem)
 
-## Installation
+## ⚙️ Installation
 ```bash
 $ npm install react-scenejs
 ```
 
 
-## Make Scene
+## 🎬 Make Scene
 ```jsx
 import {
     useScene,
@@ -69,7 +69,7 @@ function App() {
     }, []);
     return <div className="container">
         <div className="a1" style={a1.camelCasedCSSObject}></div>
-        <div className="a2" style={a1.camelCasedCSSObject}></div>
+        <div className="a2" style={a2.camelCasedCSSObject}></div>
     </div>;
 
 }

diff --git a/packages/react-scenejs/package.json b/packages/react-scenejs/package.json
@@ -3,10 +3,11 @@
     "version": "2.0.0-beta.0",
     "lernaHelperReleaseType": "prerelease",
     "lernaHelperPublishTag": "latest",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/daybrush/scenejs.git"
-    },
+    "description": "A React Component that create JavaScript & CSS timeline-based animation with Scene.js.",
+    "main": "./dist/scene.cjs.js",
+    "module": "./dist/scene.esm.js",
+    "sideEffects": false,
+    "types": "declaration/index.d.ts",
     "keywords": [
         "react",
         "reactive",
@@ -23,6 +24,10 @@
         "requestAnimationFrame",
         "motion"
     ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/daybrush/scenejs.git"
+    },
     "author": "Daybrush",
     "license": "MIT",
     "bugs": {
@@ -35,7 +40,7 @@
         "declaration/*"
     ],
     "dependencies": {
-        "@cfcs/react": "^0.0.9",
+        "@cfcs/react": "^0.0.10",
         "scenejs": "~1.8.0"
     },
     "scripts": {

diff --git a/packages/scenejs/README.md b/packages/scenejs/README.md
@@ -55,20 +55,8 @@ $ npm install scenejs
 * [API Documentation](https://daybrush.com/scenejs/release/latest/doc/)
 * [Features Documentation](https://daybrush.com/scenejs/features.html)
 
-## 📦 Packages
-|Package|Version|Description|
-|---|---|---|
-|[**react-scenejs**](https://github.com/daybrush/scenejs/tree/master/packages/react-scenejs)|[![](https://img.shields.io/npm/v/react-scenejs.svg?style=flat-square)](https://npmjs.com/package/react-scenejs)|A React Component that create JavaScript & CSS timeline-based animation with Scene.js.|
-|[**vue-scenejs**](https://github.com/daybrush/scenejs/tree/master/packages/vue-scenejs)|[![](https://img.shields.io/npm/v/vue-scenejs.svg?style=flat-square)](https://npmjs.com/package/vue-scenejs)|A Vue Component that create JavaScript & CSS timeline-based animation with Scene.js.|
-|[**vue3-scenejs**](https://github.com/daybrush/scenejs/tree/master/packages/vue3-scenejs)|[![](https://img.shields.io/npm/v/vue3-scenejs.svg?style=flat-square)](https://npmjs.com/package/vue3-scenejs)|A Vue 3 Component that create JavaScript & CSS timeline-based animation with Scene.js.|
-|[**svelte-scenejs**](https://github.com/daybrush/scenejs/tree/master/packages/svelte-scenejs)|[![](https://img.shields.io/npm/v/svelte-scenejs.svg?style=flat-square)](https://npmjs.com/package/svelte-scenejs)|A Svelte Component that create JavaScript & CSS timeline-based animation with Scene.js.|
-|[**@scenejs/effects**](https://github.com/daybrush/scenejs-effects)|[![](https://img.shields.io/npm/v/@scenejs/effects.svg?style=flat-square)](https://npmjs.com/package/@scenejs/effects)|Effect collection library where you can add scene effects to Scene.js.|
-|[**@scenejs/timeline**](https://github.com/daybrush/scenejs-timeline)|[![](https://img.shields.io/npm/v/@scenejs/timeline.svg?style=flat-square)](https://npmjs.com/package/@scenejs/timeline)|A library that represents the timeline of Scene.js. You can control time, properties, and items.|
-|[**@scenejs/media**](https://github.com/daybrush/scenejs-media)|[![](https://img.shields.io/npm/v/@scenejs/media.svg?style=flat-square)](https://npmjs.com/package/@scenejs/media)|A library for playing or controlling media with Scene.js.|
-|[**@scenejs/iframe**](https://github.com/daybrush/scenejs-iframe)|[![](https://img.shields.io/npm/v/@scenejs/iframe.svg?style=flat-square)](https://npmjs.com/package/@scenejs/iframe)|A library that control the animation of iframe with Scene.js.|
-|[**@scenejs/render**](https://github.com/daybrush/scenejs-render)|[![](https://img.shields.io/npm/v/@scenejs/render.svg?style=flat-square)](https://npmjs.com/package/@scenejs/render)|Make a movie of CSS animation through Scene.js.|
 
-## 🎬 Make scene
+## 🎬 Make Scene
 ```javascript
 import Scene from "scenejs";
 
@@ -94,6 +82,20 @@ const scene = new Scene({
 }).play();
 
 ```
+
+## 📦 Packages
+|Package|Version|Description|
+|---|---|---|
+|[**react-scenejs**](https://github.com/daybrush/scenejs/tree/master/packages/react-scenejs)|[![](https://img.shields.io/npm/v/react-scenejs.svg?style=flat-square)](https://npmjs.com/package/react-scenejs)|A React Component that create JavaScript & CSS timeline-based animation with Scene.js.|
+|[**vue-scenejs**](https://github.com/daybrush/scenejs/tree/master/packages/vue-scenejs)|[![](https://img.shields.io/npm/v/vue-scenejs.svg?style=flat-square)](https://npmjs.com/package/vue-scenejs)|A Vue Component that create JavaScript & CSS timeline-based animation with Scene.js.|
+|[**vue3-scenejs**](https://github.com/daybrush/scenejs/tree/master/packages/vue3-scenejs)|[![](https://img.shields.io/npm/v/vue3-scenejs.svg?style=flat-square)](https://npmjs.com/package/vue3-scenejs)|A Vue 3 Component that create JavaScript & CSS timeline-based animation with Scene.js.|
+|[**svelte-scenejs**](https://github.com/daybrush/scenejs/tree/master/packages/svelte-scenejs)|[![](https://img.shields.io/npm/v/svelte-scenejs.svg?style=flat-square)](https://npmjs.com/package/svelte-scenejs)|A Svelte Component that create JavaScript & CSS timeline-based animation with Scene.js.|
+|[**@scenejs/effects**](https://github.com/daybrush/scenejs-effects)|[![](https://img.shields.io/npm/v/@scenejs/effects.svg?style=flat-square)](https://npmjs.com/package/@scenejs/effects)|Effect collection library where you can add scene effects to Scene.js.|
+|[**@scenejs/timeline**](https://github.com/daybrush/scenejs-timeline)|[![](https://img.shields.io/npm/v/@scenejs/timeline.svg?style=flat-square)](https://npmjs.com/package/@scenejs/timeline)|A library that represents the timeline of Scene.js. You can control time, properties, and items.|
+|[**@scenejs/media**](https://github.com/daybrush/scenejs-media)|[![](https://img.shields.io/npm/v/@scenejs/media.svg?style=flat-square)](https://npmjs.com/package/@scenejs/media)|A library for playing or controlling media with Scene.js.|
+|[**@scenejs/iframe**](https://github.com/daybrush/scenejs-iframe)|[![](https://img.shields.io/npm/v/@scenejs/iframe.svg?style=flat-square)](https://npmjs.com/package/@scenejs/iframe)|A library that control the animation of iframe with Scene.js.|
+|[**@scenejs/render**](https://github.com/daybrush/scenejs-render)|[![](https://img.shields.io/npm/v/@scenejs/render.svg?style=flat-square)](https://npmjs.com/package/@scenejs/render)|Make a movie of CSS animation through Scene.js.|
+
 ## ✨ Effects
 
 * [typing](https://daybrush.com/scenejs/features.html#typing)

diff --git a/packages/scenejs/package.json b/packages/scenejs/package.json
@@ -66,7 +66,7 @@
         "typescript": "^4.5.0 <4.6.0"
     },
     "dependencies": {
-        "@cfcs/core": "^0.0.9",
+        "@cfcs/core": "^0.0.10",
         "@daybrush/utils": "^1.8.0",
         "@scena/event-emitter": "^1.0.3",
         "css-styled": "^1.0.0",

diff --git a/packages/scenejs/src/reactive/Frame.ts b/packages/scenejs/src/reactive/Frame.ts
@@ -35,18 +35,19 @@ export interface FrameReactiveState {
     camelCasedCSSObject: Record<string, any>;
 }
 
-export type FrameReactiveInstance = ReactiveObject<FrameReactiveMethods & FrameReactiveState> & {
+export type FrameReactiveInstance = ReactiveObject<FrameReactiveState> & FrameReactiveMethods & {
     getFrameObserver(): Observer<Frame>;
     onUpdate(): void;
 };
 
 export const FRAME_REACTIVE: ReactiveAdapter<
     FrameReactiveInstance,
     FrameReactiveState,
-    never,
+    keyof FrameReactiveMethods,
     FrameReactiveData,
     {}
 > = {
+    methods: FRAME_METHODS as Array<keyof FrameReactiveMethods>,
     created(data: FrameReactiveData) {
         const updateCount = observe(0);
         let frame: Observer<Frame>;

diff --git a/packages/scenejs/src/reactive/NowFrame.ts b/packages/scenejs/src/reactive/NowFrame.ts
@@ -1,7 +1,7 @@
 import { observe, ReactiveAdapter } from "@cfcs/core";
 import Frame from "../Frame";
 import SceneItem from "../SceneItem";
-import { FrameReactiveInstance, FrameReactiveState, FRAME_REACTIVE } from "./Frame";
+import { FrameReactiveInstance, FrameReactiveMethods, FrameReactiveState, FRAME_REACTIVE } from "./Frame";
 
 export const NOW_FRAME_REACTIVE = {
     ...FRAME_REACTIVE,
@@ -16,7 +16,7 @@ export const NOW_FRAME_REACTIVE = {
 } as ReactiveAdapter<
     FrameReactiveInstance,
     FrameReactiveState,
-    never,
+    keyof FrameReactiveMethods,
     SceneItem,
     {}
 >;
diff --git a/packages/scenejs/src/reactive/Scene.ts b/packages/scenejs/src/reactive/Scene.ts
@@ -26,19 +26,21 @@ export interface SceneReactiveProps {
 export declare type SceneReactiveData = Scene | SceneReactiveProps;
 
 export type SceneReactiveMethods = ReactiveMethods<Scene>;
-export type SceneReactiveInstance = ReactiveObject<SceneReactiveMethods & AnimatorReactiveState>;
+export type SceneReactiveInstance = ReactiveObject<AnimatorReactiveState> & SceneReactiveMethods;
 
 export const SCENE_REACTIVE: ReactiveAdapter<
     SceneReactiveInstance,
-    SceneReactiveInstance,
-    never,
+    AnimatorReactiveState,
+    keyof SceneReactiveMethods,
     SceneReactiveData,
     SceneEvents
 > = {
+    methods: SCENE_METHODS as Array<keyof SceneReactiveMethods>,
     created(data: SceneReactiveData) {
         const scene = isScene(data) ? data : new Scene(data?.props, data?.options);
         const obj = scene.state as any as ReactiveObject<AnimatorState>;
         const observers = getObservers(obj);
+
         const totalDuration = computed(() => {
             return scene.getTotalDuration();
         });
@@ -53,7 +55,6 @@ export const SCENE_REACTIVE: ReactiveAdapter<
             }, {}),
         };
 
-        console.log(scene);
         const nextReactiveObject = reactive(nextObj) as SceneReactiveInstance;
 
         return nextReactiveObject;

diff --git a/packages/scenejs/src/reactive/SceneItem.ts b/packages/scenejs/src/reactive/SceneItem.ts
@@ -29,15 +29,16 @@ export type SceneItemReactiveData = SceneItem | {
 };
 
 export type SceneItemReactiveMethods = ReactiveMethods<Scene>;
-export type SceneItemReactiveInstance = ReactiveObject<SceneItemReactiveMethods & AnimatorReactiveState>;
+export type SceneItemReactiveInstance = ReactiveObject<AnimatorReactiveState> & SceneItemReactiveMethods;
 
 export const SCENE_ITEM_REACTIVE: ReactiveAdapter<
     SceneItemReactiveInstance,
-    SceneItemReactiveInstance,
-    never,
+    AnimatorReactiveState,
+    keyof SceneItemReactiveMethods,
     SceneItemReactiveData,
     SceneItemEvents
 > = {
+    methods: SCENE_ITEM_METHODS as Array<keyof SceneItemReactiveMethods>,
     created(data: SceneItemReactiveData) {
         const sceneItem = isSceneItem(data) ? data : new SceneItem(data?.props, data?.options);
         const obj = sceneItem.state as any as ReactiveObject<AnimatorState>;