@luna-editor/engine 0.3.0 → 0.3.1

package/dist/plugin/PluginManager.js

@@ -21,6 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from "react";
 import { useScreenSizeAtom } from "../atoms/screen-size";
 import { useDataAPI } from "../contexts/DataContext";
+import { getFontFamilyStyle, getUIFontFamilyStyle, } from "../hooks/useFontLoader";
 import { usePluginAPI, useUIVisibility } from "../hooks/usePluginAPI";
 import { useScreenScale, useScreenSize, useToPixel, } from "../hooks/useScreenSize";
 import { ComponentType, definePlugin, } from "../sdk";
@@ -31,6 +32,7 @@ export class PluginManager {
     constructor() {
         this.plugins = new Map();
         this.styleElements = new Map();
+        this.originalClassNames = new Map(); // 元のクラス名を保持
         this.injectedStyles = new Set();
         this.storage = new Map();
         this.componentRegistry = new Map();
@@ -38,6 +40,8 @@ export class PluginManager {
         this.uiVisibilityListeners = new Map();
         this.selectChoiceCallback = null;
         this.getBranchStateCallback = null;
+        this.emotionEffectUpdaterCallback = null;
+        this.dataContextGetter = null;
         this.preloadPromises = [];
         this.muteAudio = false;
         // 作品のサウンドデータ（ID → URL）
@@ -49,6 +53,18 @@ export class PluginManager {
         this.clickSoundOverridden = false;
         this.initializeReactRuntime();
     }
+    /**
+     * 開発環境かどうかを判定
+     * localhost、127.0.0.1、またはポート3000で実行されている場合に true を返す
+     */
+    isDevelopment() {
+        if (typeof window === "undefined") {
+            return false;
+        }
+        return (window.location.hostname === "localhost" ||
+            window.location.hostname === "127.0.0.1" ||
+            window.location.port === "3000");
+    }
     /**
      * グローバルReactランタイムを初期化（クライアントサイドのみ）
      * 既に初期化済みの場合はスキップ
@@ -92,50 +108,62 @@ export class PluginManager {
             useScreenScale,
             useScreenSizeAtom,
             ComponentType,
-            definePlugin });
-        console.log("🔧 Luna React Runtime initialized for JSX support with hooks and screen size system");
+            definePlugin,
+            getFontFamilyStyle,
+            getUIFontFamilyStyle });
     }
-    loadPlugin(packageName, bundleUrl, config) {
+    loadPlugin(packageName, bundleUrl, config, assets) {
         return __awaiter(this, void 0, void 0, function* () {
-            // グローバルに既にロード済みの場合はローカルにコピーしてスキップ
-            const globalLoaded = globalLoadedPlugins.get(packageName);
-            if (globalLoaded) {
-                console.log(`Plugin ${packageName} is already loaded globally, reusing.`);
-                // 新しいconfigで更新したコピーを作成
-                const updatedPlugin = Object.assign(Object.assign({}, globalLoaded), { config: config !== null && config !== void 0 ? config : globalLoaded.config });
-                this.plugins.set(packageName, updatedPlugin);
-                // コンポーネントレジストリにも登録
-                for (const [type, component] of globalLoaded.instance.components) {
-                    this.componentRegistry.set(type, component);
-                }
-                return;
-            }
-            // ローカルに既にロード済みの場合はconfigだけ更新してスキップ
-            const localLoaded = this.plugins.get(packageName);
-            if (localLoaded) {
-                console.log(`Plugin ${packageName} is already loaded, updating config.`);
-                // configを更新
-                localLoaded.config = config !== null && config !== void 0 ? config : localLoaded.config;
-                return;
+            // 開発環境ではキャッシュをバイパスして常に最新コードをロード
+            const isDevelopment = this.isDevelopment();
+            if (isDevelopment) {
+                // 開発環境では強制リロード（キャッシュをクリア）
+                globalLoadedPlugins.delete(packageName);
+                this.plugins.delete(packageName);
+                // ロード中のPromiseもクリア（再ロードを確実にするため）
+                globalLoadingPlugins.delete(packageName);
             }
-            // グローバルでロード中の場合はそのPromiseを待つ
-            const existingLoadPromise = globalLoadingPlugins.get(packageName);
-            if (existingLoadPromise) {
-                console.log(`Plugin ${packageName} is currently loading, waiting...`);
-                yield existingLoadPromise;
-                // ロード完了後にグローバルからコピー（新しいconfigで更新）
-                const loaded = globalLoadedPlugins.get(packageName);
-                if (loaded) {
-                    const updatedPlugin = Object.assign(Object.assign({}, loaded), { config: config !== null && config !== void 0 ? config : loaded.config });
+            else {
+                // 本番環境のみキャッシュを使用
+                // グローバルに既にロード済みの場合はローカルにコピーしてスキップ
+                const globalLoaded = globalLoadedPlugins.get(packageName);
+                if (globalLoaded) {
+                    // 新しいconfigで更新したコピーを作成
+                    const updatedPlugin = Object.assign(Object.assign({}, globalLoaded), { config: config !== null && config !== void 0 ? config : globalLoaded.config });
                     this.plugins.set(packageName, updatedPlugin);
-                    for (const [type, component] of loaded.instance.components) {
+                    // コンポーネントレジストリにも登録
+                    for (const [type, component] of globalLoaded.instance.components) {
                         this.componentRegistry.set(type, component);
                     }
+                    return;
+                }
+            }
+            if (!isDevelopment) {
+                // 本番環境のみ：ローカルに既にロード済みの場合はconfigだけ更新してスキップ
+                const localLoaded = this.plugins.get(packageName);
+                if (localLoaded) {
+                    // configを更新
+                    localLoaded.config = config !== null && config !== void 0 ? config : localLoaded.config;
+                    return;
+                }
+                // 本番環境のみ：グローバルでロード中の場合はそのPromiseを待つ
+                const existingLoadPromise = globalLoadingPlugins.get(packageName);
+                if (existingLoadPromise) {
+                    yield existingLoadPromise;
+                    // ロード完了後にグローバルからコピー（新しいconfigで更新）
+                    const loaded = globalLoadedPlugins.get(packageName);
+                    if (loaded) {
+                        const updatedPlugin = Object.assign(Object.assign({}, loaded), { config: config !== null && config !== void 0 ? config : loaded.config });
+                        this.plugins.set(packageName, updatedPlugin);
+                        for (const [type, component] of loaded.instance.components) {
+                            this.componentRegistry.set(type, component);
+                        }
+                    }
+                    return;
                 }
-                return;
             }
             // ロード処理をPromiseとして保存
-            const loadPromise = this.doLoadPlugin(packageName, bundleUrl, config);
+            const loadPromise = this.doLoadPlugin(packageName, bundleUrl, config, assets);
             globalLoadingPlugins.set(packageName, loadPromise);
             try {
                 yield loadPromise;
@@ -146,7 +174,7 @@ export class PluginManager {
             }
         });
     }
-    doLoadPlugin(packageName, bundleUrl, config) {
+    doLoadPlugin(packageName, bundleUrl, config, assets) {
         return __awaiter(this, void 0, void 0, function* () {
             try {
                 // スクリプトタグで動的にプラグインを読み込む
@@ -160,11 +188,16 @@ export class PluginManager {
                     components: new Map(),
                     assetUrls: new Map(),
                 };
+                // 外部アプリから渡されたアセットURLを事前にキャッシュ
+                if (assets) {
+                    for (const asset of assets) {
+                        instance.assetUrls.set(asset.filename, asset.url);
+                    }
+                }
                 // プラグインAPIを作成
                 const api = this.createPluginAPI(packageName, instance);
                 // プラグインをセットアップ
                 plugin.setup(api);
-                console.log(`Plugin ${packageName} setup completed. Hooks:`, Object.keys(instance.hooks));
                 const loadedPlugin = {
                     plugin,
                     instance,
@@ -203,9 +236,7 @@ export class PluginManager {
             };
             // プラグインバンドルをfetchで取得して実行
             // 開発環境ではキャッシュを無効化してホットリロードを確実に動作させる
-            const isDevelopment = window.location.hostname === "localhost" ||
-                window.location.hostname === "127.0.0.1" ||
-                window.location.port === "3000";
+            const isDevelopment = this.isDevelopment();
             const fetchOptions = isDevelopment
                 ? {
                     cache: "no-cache",
@@ -215,7 +246,6 @@ export class PluginManager {
                     },
                 }
                 : {};
-            console.log(`🔄 Loading plugin ${packageName} (dev: ${isDevelopment}, cache: ${isDevelopment ? "disabled" : "enabled"})`);
             fetch(url, fetchOptions)
                 .then((response) => {
                 if (!response.ok) {
@@ -589,16 +619,26 @@ export class PluginManager {
             preload: (filenames) => {
                 const preloadPromise = (() => __awaiter(this, void 0, void 0, function* () {
                     const promises = filenames.map((filename) => __awaiter(this, void 0, void 0, function* () {
-                        // APIエンドポイントURL
-                        const encodedPackageName = encodeURIComponent(packageName);
-                        const encodedFilename = encodeURIComponent(filename);
-                        const apiUrl = `/api/plugin/${encodedPackageName}/assets/${encodedFilename}`;
-                        // fetchでリダイレクト後の最終URLを取得
+                        // 既にキャッシュされたURLがあればAPIフェッチをスキップ
+                        let finalUrl = instance.assetUrls.get(filename);
+                        if (!finalUrl) {
+                            // APIエンドポイントURL
+                            const encodedPackageName = encodeURIComponent(packageName);
+                            const encodedFilename = encodeURIComponent(filename);
+                            const apiUrl = `/api/plugin/${encodedPackageName}/assets/${encodedFilename}`;
+                            // fetchでリダイレクト後の最終URLを取得
+                            try {
+                                const response = yield fetch(apiUrl, { method: "HEAD" });
+                                finalUrl = response.url; // リダイレクト後の最終URL
+                                // 最終URLをキャッシュに保存
+                                instance.assetUrls.set(filename, finalUrl);
+                            }
+                            catch (error) {
+                                console.error(`Failed to preload asset: ${filename}`, error);
+                                return Promise.resolve();
+                            }
+                        }
                         try {
-                            const response = yield fetch(apiUrl, { method: "HEAD" });
-                            const finalUrl = response.url; // リダイレクト後の最終URL
-                            // 最終URLをキャッシュに保存
-                            instance.assetUrls.set(filename, finalUrl);
                             // 画像をプリロード
                             if (filename.match(/\.(png|jpg|jpeg|gif|webp)$/i)) {
                                 return new Promise((resolve, reject) => {
@@ -621,7 +661,6 @@ export class PluginManager {
                         catch (error) {
                             console.error(`Failed to preload asset: ${filename}`, error);
                         }
-                        return Promise.resolve();
                     }));
                     yield Promise.all(promises);
                 }))();
@@ -679,7 +718,6 @@ export class PluginManager {
                 }
                 instance.components.set(type, component);
                 this.componentRegistry.set(type, component);
-                console.log(`Plugin ${packageName} registered component: ${type}`);
             },
         };
         const uiAPI = {
@@ -777,8 +815,14 @@ export class PluginManager {
                 },
             },
             data: {
-                get: () => {
-                    throw new Error("DataAPI.get() can only be called from within DataProvider context");
+                get: (key) => {
+                    if (this.dataContextGetter) {
+                        const context = this.dataContextGetter();
+                        const value = context === null || context === void 0 ? void 0 : context[key];
+                        return value;
+                    }
+                    console.warn("DataContext getter is not registered. Make sure to call setDataContextGetter.");
+                    return undefined;
                 },
                 subscribe: () => {
                     throw new Error("DataAPI.subscribe() can only be called from within DataProvider context");
@@ -804,13 +848,26 @@ export class PluginManager {
                 setVolumes: () => {
                     throw new Error("DataAPI.setVolumes() can only be called from within DataProvider context");
                 },
+                updateEmotionEffect: (state) => {
+                    if (this.emotionEffectUpdaterCallback) {
+                        this.emotionEffectUpdaterCallback(state);
+                    }
+                    else {
+                        console.warn("updateEmotionEffect callback is not registered. Make sure to call setEmotionEffectUpdaterCallback.");
+                    }
+                },
             },
         };
     }
     applyStyles(elementName, classNames) {
         const element = this.styleElements.get(elementName);
         if (element) {
-            element.className = classNames.join(" ");
+            // 元のクラス名を取得し、プラグインから追加されたクラスと結合
+            const originalClassName = this.originalClassNames.get(elementName) || "";
+            const pluginClassNames = classNames.join(" ");
+            element.className = originalClassName
+                ? `${originalClassName} ${pluginClassNames}`
+                : pluginClassNames;
         }
     }
     hideEffect(effectId, instance) {
@@ -831,17 +888,17 @@ export class PluginManager {
         // DOM要素にdata-style-element-name属性を追加
         element.setAttribute("data-style-element-name", name);
         this.styleElements.set(name, element);
+        // 元のクラス名を保存（初回登録時のみ）
+        if (!this.originalClassNames.has(name)) {
+            this.originalClassNames.set(name, element.className);
+        }
     }
     // フック呼び出しメソッド
     callHook(hookName, ...args) {
-        console.log(`Calling hook: ${hookName}`, args);
-        console.log(`Number of plugins: ${this.plugins.size}`);
         this.plugins.forEach((loadedPlugin, packageName) => {
             const { instance, enabled } = loadedPlugin;
-            console.log(`Plugin ${packageName}: enabled=${enabled}, has hook=${!!instance.hooks[hookName]}`);
             if (enabled && instance.hooks[hookName]) {
                 try {
-                    console.log(`Executing hook ${hookName} for plugin ${packageName}`);
                     const hook = instance.hooks[hookName];
                     if (hook) {
                         hook(...args);
@@ -1043,6 +1100,12 @@ export class PluginManager {
     setGetBranchStateCallback(callback) {
         this.getBranchStateCallback = callback;
     }
+    setEmotionEffectUpdaterCallback(callback) {
+        this.emotionEffectUpdaterCallback = callback;
+    }
+    setDataContextGetter(callback) {
+        this.dataContextGetter = callback;
+    }
     /**
      * 全てのアセットプリロードが完了するまで待機
      * @returns プリロード完了時にresolveするPromise

package/dist/plugin/luna-react.d.ts

@@ -0,0 +1,41 @@
+/**
+ * プラグインAPIからReactインスタンスを設定
+ */
+export declare function setReactRuntime(react: any): void;
+/**
+ * JSX Transform用のjsx関数
+ */
+export declare function jsx(type: any, props: any, key?: any): any;
+/**
+ * JSX Transform用のjsxs関数（複数子要素用）
+ */
+export declare function jsxs(type: any, props: any, key?: any): any;
+/**
+ * Fragment用
+ */
+export declare function Fragment(props: {
+    children?: any;
+}): any;
+/**
+ * Reactフックと関数のプロキシ
+ */
+export declare const useState: (...args: any[]) => any;
+export declare const useEffect: (...args: any[]) => any;
+export declare const useCallback: (...args: any[]) => any;
+export declare const useMemo: (...args: any[]) => any;
+export declare const useRef: (...args: any[]) => any;
+export declare const useContext: (...args: any[]) => any;
+export declare const useReducer: (...args: any[]) => any;
+export declare const createElement: (...args: any[]) => any;
+declare const _default: {
+    createElement: (...args: any[]) => any;
+    Fragment: typeof Fragment;
+    useState: (...args: any[]) => any;
+    useEffect: (...args: any[]) => any;
+    useCallback: (...args: any[]) => any;
+    useMemo: (...args: any[]) => any;
+    useRef: (...args: any[]) => any;
+    useContext: (...args: any[]) => any;
+    useReducer: (...args: any[]) => any;
+};
+export default _default;

package/dist/plugin/luna-react.js

@@ -0,0 +1,99 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable import/no-anonymous-default-export */
+let runtimeReact = null;
+/**
+ * プラグインAPIからReactインスタンスを設定
+ */
+export function setReactRuntime(react) {
+    runtimeReact = react;
+}
+/**
+ * JSX Transform用のjsx関数
+ */
+export function jsx(type, props, key) {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.createElement(type, key ? Object.assign(Object.assign({}, props), { key }) : props);
+}
+/**
+ * JSX Transform用のjsxs関数（複数子要素用）
+ */
+export function jsxs(type, props, key) {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.createElement(type, key ? Object.assign(Object.assign({}, props), { key }) : props);
+}
+/**
+ * Fragment用
+ */
+export function Fragment(props) {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.createElement(runtimeReact.Fragment, null, props.children);
+}
+/**
+ * Reactフックと関数のプロキシ
+ */
+export const useState = (...args) => {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.useState(...args);
+};
+export const useEffect = (...args) => {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.useEffect(...args);
+};
+export const useCallback = (...args) => {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.useCallback(...args);
+};
+export const useMemo = (...args) => {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.useMemo(...args);
+};
+export const useRef = (...args) => {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.useRef(...args);
+};
+export const useContext = (...args) => {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.useContext(...args);
+};
+export const useReducer = (...args) => {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.useReducer(...args);
+};
+export const createElement = (...args) => {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.createElement(...args);
+};
+// デフォルトエクスポート（互換性用）
+export default {
+    createElement,
+    Fragment,
+    useState,
+    useEffect,
+    useCallback,
+    useMemo,
+    useRef,
+    useContext,
+    useReducer,
+};