@meursyphus/flitter 0.0.6 → 0.0.7

package/.eslintrc.cjs

@@ -0,0 +1,35 @@
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
+  plugins: ["@typescript-eslint"],
+  ignorePatterns: ["*.cjs"],
+  parserOptions: {
+    sourceType: "module",
+    ecmaVersion: 2020,
+  },
+  env: {
+    browser: true,
+    es2017: true,
+    node: true,
+  },
+  rules: {
+    "@typescript-eslint/no-explicit-any": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "no-case-declarations": "off",
+    "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_",
+      },
+    ],
+  },
+};

package/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}

package/README.md

@@ -11,9 +11,11 @@ For more details, visit [here](https://flitter.pages.dev).
 Getting started with Flitter is straightforward. Follow these steps to install and use Flitter in your React or Svelte projects. (Or you can implement widget component manually to support Flitter.)
 
 ### React
+
 ```bash
 npm i @meursyphus/flitter @meursyphus/flitter-react
 ```
+
 Example of using Flitter widgets in a React component:
 
 ```javascript
@@ -34,6 +36,7 @@ const App = () => {
   );
 };
 ```
+
 ### Svelte
 
 ```bash
@@ -67,4 +70,4 @@ npm i @meursyphus/flitter @meursyphus/flitter-svelte
 
 Flitter is open-source software freely available under the MIT license.
 
-For more information and documentation, refer to the [Flitter official documentation](https://flitter.pages.dev).
+For more information and documentation, refer to the [Flitter official documentation](https://flitter.pages.dev).

package/dist/README.md

@@ -0,0 +1,73 @@
+# Flitter
+
+Flitter is a framework that deals with SVG. Like React, it uses VDOM to manage state and optimize rendering. Since the library directly calculates the layout, it is much easier to visualize data than using D3. This provides a high level of control and flexibility for data visualization.
+
+FlutterJs is a library inspired by Flutter, a cross-platform framework commonly used for mobile app development.
+
+For more details, visit [here](https://flitter.pages.dev).
+
+## Getting Started
+
+Getting started with Flitter is straightforward. Follow these steps to install and use Flitter in your React or Svelte projects. (Or you can implement widget component manually to support Flitter.)
+
+### React
+
+```bash
+npm i @meursyphus/flitter @meursyphus/flitter-react
+```
+
+Example of using Flitter widgets in a React component:
+
+```javascript
+import { Container, Alignment, Text, TextStyle } from '@meursyphus/flitter';
+import Widget from '@meursyphus/flitter-react';
+
+const App = () => {
+  return (
+    <Widget
+      width="600px"
+      height="300px"
+      widget={Container({
+        alignment: Alignment.center,
+        color: 'lightblue',
+        child: Text("Hello, Flitter!", style: TextStyle({ fontSize: 30, weight: 'bold' }))
+      })}
+    />
+  );
+};
+```
+
+### Svelte
+
+```bash
+npm i @meursyphus/flitter @meursyphus/flitter-svelte
+```
+
+```svelte
+<script>
+  import { Container, Alignment, Text, TextStyle } from '@meursyphus/flitter';
+  import Widget from '@meursyphus/flitter-svelte';
+</script>
+
+<Widget
+  width="600px"
+  height="300px"
+  widget={Container({
+    alignment: Alignment.center,
+    color: 'lightblue',
+    child: Text("Hello, Flitter!", style: TextStyle({ fontSize: 30, weight: 'bold' }))
+  })}
+/>
+```
+
+## Features
+
+- Provides high-resolution, resolution-independent visualizations based on SVG
+- Simplifies SVG manipulation with a component-based approach
+- Allows for quick learning and development with a syntax similar to Flutter
+
+## License
+
+Flitter is open-source software freely available under the MIT license.
+
+For more information and documentation, refer to the [Flitter official documentation](https://flitter.pages.dev).

package/{index.cjs → dist/index.cjs}

@@ -351,7 +351,7 @@ var lerp_default = lerp;
 // src/utils/getTextSize.ts
 var OFFSET = 20;
 var SCALE = 100;
-var defaultWidthMapStr = `007LLmW'55;N0500LLLLLLLLLL00NNNLzWW\\\\WQb\\0FWLg\\bWb\\WQ\\WrWWQ000CL5LLFLL0LL**F*gLLLL5F0LF\\FFF5.5N`;
+var defaultWidthMapStr = "007LLmW'55;N0500LLLLLLLLLL00NNNLzWW\\\\WQb\\0FWLg\\bWb\\WQ\\WrWWQ000CL5LLFLL0LL**F*gLLLL5F0LF\\FFF5.5N";
 var DEFAULT_FONT_SIZE = 12;
 var DEFAULT_FONT_FAMILY = "sans-serif";
 var DEFAULT_FONT = `${DEFAULT_FONT_SIZE}px ${DEFAULT_FONT_FAMILY}`;
@@ -12226,9 +12226,7 @@ var RenderView = class extends RenderObject_default {
       width: constraint.maxWidth,
       height: constraint.maxHeight
     });
-    this.children.forEach(
-      (child) => child.layout(constraints_default.loose(this.size))
-    );
+    this.children.forEach((child) => child.layout(constraints_default.loose(this.size)));
   }
   paint(context, clipId, matrix4, opacity) {
     if (this.size.width === 0 || this.size.height === 0)
@@ -12670,6 +12668,12 @@ var Scheduler = class {
     this.persistenceCallbacks = [];
     this.postFrameCallbacks = [];
   }
+  consumePostCallbacks() {
+    this.postFrameCallbacks.forEach((callback) => {
+      callback();
+    });
+    this.postFrameCallbacks = [];
+  }
   schedule() {
     switch (this.phase) {
       case 0 /* idle */:
@@ -12686,9 +12690,7 @@ var Scheduler = class {
       callback();
     });
     this.phase = 2 /* postFrameCallbacks */;
-    this.postFrameCallbacks.forEach((callback) => {
-      callback();
-    });
+    this.consumePostCallbacks();
     this.postFrameCallbacks = [];
     this.phase = 0 /* idle */;
   }
@@ -12705,25 +12707,25 @@ var Scheduler_default = Scheduler;
 var RenderFrameDispatcher = class {
   constructor({ onFrame } = {}) {
     __publicField(this, "onFrame");
+    // Actually we don't need to invoke browser to render because browser automatically render its own state periodically
+    // so Here we just call onFrame callback.
+    __publicField(this, "idle", true);
     this.onFrame = onFrame;
   }
   setOnFrame(callback) {
     this.onFrame = () => callback();
   }
-  // Actually we dont need to invoke browser to render because browser automatically render its own state periodically
-  // so Here we just call onFrame callback.
   dispatch() {
-    if (typeof window === "undefined") {
-      setTimeout(() => {
-        var _a;
-        (_a = this.onFrame) == null ? void 0 : _a.call(this);
-      }, 0);
-    } else {
-      window.requestAnimationFrame(() => {
-        var _a;
-        (_a = this.onFrame) == null ? void 0 : _a.call(this);
-      });
-    }
+    if (typeof window === "undefined")
+      return;
+    if (!this.idle)
+      return;
+    this.idle = false;
+    window.requestAnimationFrame(() => {
+      var _a;
+      (_a = this.onFrame) == null ? void 0 : _a.call(this);
+      this.idle = true;
+    });
   }
 };
 var RenderFrameDispatcher_default = RenderFrameDispatcher;
@@ -12758,7 +12760,6 @@ var AppRunner = class {
     __publicField(this, "buildOwner");
     __publicField(this, "renderOwner");
     __publicField(this, "scheduler");
-    __publicField(this, "renderDispatcher");
     __publicField(this, "didRun", false);
     __publicField(this, "widget");
     this.viewSize = ssrSize;
@@ -12782,13 +12783,12 @@ var AppRunner = class {
     this.buildOwner = buildOwner;
     this.renderOwner = renderOwner;
     this.scheduler = scheduler;
-    this.renderDispatcher = renderDispatcher;
     this.renderContext = renderContext;
   }
   runApp(widget) {
     this.widget = widget;
     if (this.viewSize == null)
-      return ``;
+      return "";
     this.root = new RenderObjectToWidgetAdapter_default({
       app: widget,
       buildOwner: this.buildOwner,
@@ -12800,6 +12800,7 @@ var AppRunner = class {
     this.root.renderObject.constraints = constraints_default.tight(this.viewSize);
     this.didRun = true;
     this.draw();
+    this.scheduler.consumePostCallbacks();
     return this.renderContext.view.innerHTML;
   }
   setConfig({
@@ -17492,16 +17493,19 @@ var RenderGestureDetector = class extends SingleChildRenderObject_default {
       drag: this.onDragMove,
       dragend: this.onDragEnd
     };
-    return TypedObject_default.keys(listeners).reduce((acc, key) => {
-      acc[key] = (e) => {
-        var _a;
-        if (this.bubble[key]) {
-          this.dispatchParent(e);
-        }
-        (_a = listeners[key]) == null ? void 0 : _a.call(listeners, e);
-      };
-      return acc;
-    }, {});
+    return TypedObject_default.keys(listeners).reduce(
+      (acc, key) => {
+        acc[key] = (e) => {
+          var _a;
+          if (this.bubble[key]) {
+            this.dispatchParent(e);
+          }
+          (_a = listeners[key]) == null ? void 0 : _a.call(listeners, e);
+        };
+        return acc;
+      },
+      {}
+    );
   }
   attach(ownerElement) {
     super.attach(ownerElement);

package/{index.d.cts → dist/index.d.cts}

@@ -3328,6 +3328,7 @@ declare class Scheduler {
     private persistenceCallbacks;
     private postFrameCallbacks;
     constructor();
+    consumePostCallbacks(): void;
     schedule(): void;
     private performSchedule;
     addPersistenceCallbacks(callback: () => void): void;
@@ -3345,6 +3346,7 @@ declare class RenderFrameDispatcher {
         onFrame?: () => void;
     });
     setOnFrame(callback: () => void): void;
+    private idle;
     dispatch(): void;
 }
 
@@ -3513,7 +3515,6 @@ declare class AppRunner {
     private buildOwner;
     private renderOwner;
     private scheduler;
-    private renderDispatcher;
     constructor({ view, document: _document, window: _window, ssrSize, }: AppRunnerProps);
     private didRun;
     private widget;

package/{index.d.ts → dist/index.d.ts}

@@ -3328,6 +3328,7 @@ declare class Scheduler {
     private persistenceCallbacks;
     private postFrameCallbacks;
     constructor();
+    consumePostCallbacks(): void;
     schedule(): void;
     private performSchedule;
     addPersistenceCallbacks(callback: () => void): void;
@@ -3345,6 +3346,7 @@ declare class RenderFrameDispatcher {
         onFrame?: () => void;
     });
     setOnFrame(callback: () => void): void;
+    private idle;
     dispatch(): void;
 }
 
@@ -3513,7 +3515,6 @@ declare class AppRunner {
     private buildOwner;
     private renderOwner;
     private scheduler;
-    private renderDispatcher;
     constructor({ view, document: _document, window: _window, ssrSize, }: AppRunnerProps);
     private didRun;
     private widget;

package/{index.global.js → dist/index.global.js}

@@ -867,7 +867,7 @@
   // src/utils/getTextSize.ts
   var OFFSET = 20;
   var SCALE = 100;
-  var defaultWidthMapStr = `007LLmW'55;N0500LLLLLLLLLL00NNNLzWW\\\\WQb\\0FWLg\\bWb\\WQ\\WrWWQ000CL5LLFLL0LL**F*gLLLL5F0LF\\FFF5.5N`;
+  var defaultWidthMapStr = "007LLmW'55;N0500LLLLLLLLLL00NNNLzWW\\\\WQb\\0FWLg\\bWb\\WQ\\WrWWQ000CL5LLFLL0LL**F*gLLLL5F0LF\\FFF5.5N";
   var DEFAULT_FONT_SIZE = 12;
   var DEFAULT_FONT_FAMILY = "sans-serif";
   var DEFAULT_FONT = `${DEFAULT_FONT_SIZE}px ${DEFAULT_FONT_FAMILY}`;
@@ -12940,9 +12940,7 @@
         width: constraint.maxWidth,
         height: constraint.maxHeight
       });
-      this.children.forEach(
-        (child) => child.layout(constraints_default.loose(this.size))
-      );
+      this.children.forEach((child) => child.layout(constraints_default.loose(this.size)));
     }
     paint(context, clipId, matrix4, opacity) {
       if (this.size.width === 0 || this.size.height === 0)
@@ -13384,6 +13382,12 @@
       this.persistenceCallbacks = [];
       this.postFrameCallbacks = [];
     }
+    consumePostCallbacks() {
+      this.postFrameCallbacks.forEach((callback) => {
+        callback();
+      });
+      this.postFrameCallbacks = [];
+    }
     schedule() {
       switch (this.phase) {
         case 0 /* idle */:
@@ -13400,9 +13404,7 @@
         callback();
       });
       this.phase = 2 /* postFrameCallbacks */;
-      this.postFrameCallbacks.forEach((callback) => {
-        callback();
-      });
+      this.consumePostCallbacks();
       this.postFrameCallbacks = [];
       this.phase = 0 /* idle */;
     }
@@ -13419,25 +13421,25 @@
   var RenderFrameDispatcher = class {
     constructor({ onFrame } = {}) {
       __publicField(this, "onFrame");
+      // Actually we don't need to invoke browser to render because browser automatically render its own state periodically
+      // so Here we just call onFrame callback.
+      __publicField(this, "idle", true);
       this.onFrame = onFrame;
     }
     setOnFrame(callback) {
       this.onFrame = () => callback();
     }
-    // Actually we dont need to invoke browser to render because browser automatically render its own state periodically
-    // so Here we just call onFrame callback.
     dispatch() {
-      if (typeof window === "undefined") {
-        setTimeout(() => {
-          var _a;
-          (_a = this.onFrame) == null ? void 0 : _a.call(this);
-        }, 0);
-      } else {
-        window.requestAnimationFrame(() => {
-          var _a;
-          (_a = this.onFrame) == null ? void 0 : _a.call(this);
-        });
-      }
+      if (typeof window === "undefined")
+        return;
+      if (!this.idle)
+        return;
+      this.idle = false;
+      window.requestAnimationFrame(() => {
+        var _a;
+        (_a = this.onFrame) == null ? void 0 : _a.call(this);
+        this.idle = true;
+      });
     }
   };
   var RenderFrameDispatcher_default = RenderFrameDispatcher;
@@ -13472,7 +13474,6 @@
       __publicField(this, "buildOwner");
       __publicField(this, "renderOwner");
       __publicField(this, "scheduler");
-      __publicField(this, "renderDispatcher");
       __publicField(this, "didRun", false);
       __publicField(this, "widget");
       this.viewSize = ssrSize;
@@ -13496,13 +13497,12 @@
       this.buildOwner = buildOwner;
       this.renderOwner = renderOwner;
       this.scheduler = scheduler;
-      this.renderDispatcher = renderDispatcher;
       this.renderContext = renderContext;
     }
     runApp(widget) {
       this.widget = widget;
       if (this.viewSize == null)
-        return ``;
+        return "";
       this.root = new RenderObjectToWidgetAdapter_default({
         app: widget,
         buildOwner: this.buildOwner,
@@ -13514,6 +13514,7 @@
       this.root.renderObject.constraints = constraints_default.tight(this.viewSize);
       this.didRun = true;
       this.draw();
+      this.scheduler.consumePostCallbacks();
       return this.renderContext.view.innerHTML;
     }
     setConfig({
@@ -19085,16 +19086,19 @@
         drag: this.onDragMove,
         dragend: this.onDragEnd
       };
-      return TypedObject_default.keys(listeners).reduce((acc, key) => {
-        acc[key] = (e) => {
-          var _a;
-          if (this.bubble[key]) {
-            this.dispatchParent(e);
-          }
-          (_a = listeners[key]) == null ? void 0 : _a.call(listeners, e);
-        };
-        return acc;
-      }, {});
+      return TypedObject_default.keys(listeners).reduce(
+        (acc, key) => {
+          acc[key] = (e) => {
+            var _a;
+            if (this.bubble[key]) {
+              this.dispatchParent(e);
+            }
+            (_a = listeners[key]) == null ? void 0 : _a.call(listeners, e);
+          };
+          return acc;
+        },
+        {}
+      );
     }
     attach(ownerElement) {
       super.attach(ownerElement);

package/{index.js → dist/index.js}

@@ -351,7 +351,7 @@ var lerp_default = lerp;
 // src/utils/getTextSize.ts
 var OFFSET = 20;
 var SCALE = 100;
-var defaultWidthMapStr = `007LLmW'55;N0500LLLLLLLLLL00NNNLzWW\\\\WQb\\0FWLg\\bWb\\WQ\\WrWWQ000CL5LLFLL0LL**F*gLLLL5F0LF\\FFF5.5N`;
+var defaultWidthMapStr = "007LLmW'55;N0500LLLLLLLLLL00NNNLzWW\\\\WQb\\0FWLg\\bWb\\WQ\\WrWWQ000CL5LLFLL0LL**F*gLLLL5F0LF\\FFF5.5N";
 var DEFAULT_FONT_SIZE = 12;
 var DEFAULT_FONT_FAMILY = "sans-serif";
 var DEFAULT_FONT = `${DEFAULT_FONT_SIZE}px ${DEFAULT_FONT_FAMILY}`;
@@ -12226,9 +12226,7 @@ var RenderView = class extends RenderObject_default {
       width: constraint.maxWidth,
       height: constraint.maxHeight
     });
-    this.children.forEach(
-      (child) => child.layout(constraints_default.loose(this.size))
-    );
+    this.children.forEach((child) => child.layout(constraints_default.loose(this.size)));
   }
   paint(context, clipId, matrix4, opacity) {
     if (this.size.width === 0 || this.size.height === 0)
@@ -12670,6 +12668,12 @@ var Scheduler = class {
     this.persistenceCallbacks = [];
     this.postFrameCallbacks = [];
   }
+  consumePostCallbacks() {
+    this.postFrameCallbacks.forEach((callback) => {
+      callback();
+    });
+    this.postFrameCallbacks = [];
+  }
   schedule() {
     switch (this.phase) {
       case 0 /* idle */:
@@ -12686,9 +12690,7 @@ var Scheduler = class {
       callback();
     });
     this.phase = 2 /* postFrameCallbacks */;
-    this.postFrameCallbacks.forEach((callback) => {
-      callback();
-    });
+    this.consumePostCallbacks();
     this.postFrameCallbacks = [];
     this.phase = 0 /* idle */;
   }
@@ -12705,25 +12707,25 @@ var Scheduler_default = Scheduler;
 var RenderFrameDispatcher = class {
   constructor({ onFrame } = {}) {
     __publicField(this, "onFrame");
+    // Actually we don't need to invoke browser to render because browser automatically render its own state periodically
+    // so Here we just call onFrame callback.
+    __publicField(this, "idle", true);
     this.onFrame = onFrame;
   }
   setOnFrame(callback) {
     this.onFrame = () => callback();
   }
-  // Actually we dont need to invoke browser to render because browser automatically render its own state periodically
-  // so Here we just call onFrame callback.
   dispatch() {
-    if (typeof window === "undefined") {
-      setTimeout(() => {
-        var _a;
-        (_a = this.onFrame) == null ? void 0 : _a.call(this);
-      }, 0);
-    } else {
-      window.requestAnimationFrame(() => {
-        var _a;
-        (_a = this.onFrame) == null ? void 0 : _a.call(this);
-      });
-    }
+    if (typeof window === "undefined")
+      return;
+    if (!this.idle)
+      return;
+    this.idle = false;
+    window.requestAnimationFrame(() => {
+      var _a;
+      (_a = this.onFrame) == null ? void 0 : _a.call(this);
+      this.idle = true;
+    });
   }
 };
 var RenderFrameDispatcher_default = RenderFrameDispatcher;
@@ -12758,7 +12760,6 @@ var AppRunner = class {
     __publicField(this, "buildOwner");
     __publicField(this, "renderOwner");
     __publicField(this, "scheduler");
-    __publicField(this, "renderDispatcher");
     __publicField(this, "didRun", false);
     __publicField(this, "widget");
     this.viewSize = ssrSize;
@@ -12782,13 +12783,12 @@ var AppRunner = class {
     this.buildOwner = buildOwner;
     this.renderOwner = renderOwner;
     this.scheduler = scheduler;
-    this.renderDispatcher = renderDispatcher;
     this.renderContext = renderContext;
   }
   runApp(widget) {
     this.widget = widget;
     if (this.viewSize == null)
-      return ``;
+      return "";
     this.root = new RenderObjectToWidgetAdapter_default({
       app: widget,
       buildOwner: this.buildOwner,
@@ -12800,6 +12800,7 @@ var AppRunner = class {
     this.root.renderObject.constraints = constraints_default.tight(this.viewSize);
     this.didRun = true;
     this.draw();
+    this.scheduler.consumePostCallbacks();
     return this.renderContext.view.innerHTML;
   }
   setConfig({
@@ -17492,16 +17493,19 @@ var RenderGestureDetector = class extends SingleChildRenderObject_default {
       drag: this.onDragMove,
       dragend: this.onDragEnd
     };
-    return TypedObject_default.keys(listeners).reduce((acc, key) => {
-      acc[key] = (e) => {
-        var _a;
-        if (this.bubble[key]) {
-          this.dispatchParent(e);
-        }
-        (_a = listeners[key]) == null ? void 0 : _a.call(listeners, e);
-      };
-      return acc;
-    }, {});
+    return TypedObject_default.keys(listeners).reduce(
+      (acc, key) => {
+        acc[key] = (e) => {
+          var _a;
+          if (this.bubble[key]) {
+            this.dispatchParent(e);
+          }
+          (_a = listeners[key]) == null ? void 0 : _a.call(listeners, e);
+        };
+        return acc;
+      },
+      {}
+    );
   }
   attach(ownerElement) {
     super.attach(ownerElement);

package/dist/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@meursyphus/flitter",
+  "version": "0.0.7",
+  "description": "A declarative, widget-based library built on SVG for simplifying data visualization with a Flutter-like syntax.",
+  "keywords": [
+    "flitter",
+    "data visualization",
+    "SVG",
+    "widget-based",
+    "declarative",
+    "flutter"
+  ],
+  "homepage": "https://flitter.pages.dev",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsup && npm run copy-package && npm run copy-readme && cd dist && npm run fix-package",
+    "copy-package": "cp package.json dist/package.json",
+    "copy-readme": "cp README.md dist/README.md",
+    "fix-package": "npm pkg set main=./index.cjs module=./index.js exports.default=./index.js exports.import=./index.js types=./index.d.ts",
+    "lint": "eslint src/**",
+    "postbuild": "echo \"Build complete. Please run: \n\ncd dist\nnpm publish\n\"",
+    "format": "prettier --write ."
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "cp": "^0.2.0",
+    "eslint": "^8.56.0",
+    "eslint-config-standard-with-typescript": "^43.0.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "prettier": "^3.2.5",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "color-rgba": "^3.0.0",
+    "popmotion": "^11.0.5",
+    "short-unique-id": "^5.0.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meursyphus/flitter.git"
+  },
+  "author": "meursyphus",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/meursyphus/flitter/issues"
+  },
+  "main": "./index.cjs",
+  "types": "./index.d.ts",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "./index.js",
+  "exports": {
+    "default": "./index.js",
+    "import": "./index.js"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meursyphus/flitter",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "A declarative, widget-based library built on SVG for simplifying data visualization with a Flutter-like syntax.",
   "keywords": [
     "flitter",
@@ -18,7 +18,8 @@
     "copy-readme": "cp README.md dist/README.md",
     "fix-package": "npm pkg set main=./index.cjs module=./index.js exports.default=./index.js exports.import=./index.js types=./index.d.ts",
     "lint": "eslint src/**",
-    "postbuild": "echo \"Build complete. Please run: \n\ncd dist\nnpm publish\n\""
+    "postbuild": "echo \"Build complete. Please run: \n\ncd dist\nnpm publish\n\"",
+    "format": "prettier --write ."
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.16.0",
@@ -28,6 +29,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-n": "^16.6.0",
     "eslint-plugin-promise": "^6.1.1",
+    "prettier": "^3.2.5",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3"
   },
@@ -45,15 +47,10 @@
   "bugs": {
     "url": "https://github.com/meursyphus/flitter/issues"
   },
-  "main": "./index.cjs",
-  "types": "./index.d.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "type": "module",
   "publishConfig": {
     "access": "public"
-  },
-  "module": "./index.js",
-  "exports": {
-    "default": "./index.js",
-    "import": "./index.js"
   }
 }

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".", // 기준 경로를 현재 디렉토리로 설정
+    "paths": {
+      "src/*": ["./src/*"] // 'src' 별칭을 src 디렉토리에 매핑
+    },
+    "target": "ES6",
+    "useDefineForClassFields": true,
+    "module": "ES2022",
+    "moduleResolution": "Node",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "package"
+  },
+  "include": ["src/index.ts"],
+  "exclude": ["node_modules"]
+}

package/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  splitting: true,
+  sourcemap: false,
+  clean: true,
+  dts: true,
+  format: ["iife", "cjs", "esm"],
+});