@steambrew/ttc 1.2.1 → 1.4.2

package/dist/index.js

@@ -166,80 +166,215 @@ const ValidatePlugin = (target) => {
     });
 };
 
-const envConfig = dotenv.config().parsed || {};
-if (envConfig) {
-    Logger.Info("Injecting environment variables...");
-}
-const envVars = Object.keys(envConfig).reduce((acc, key) => {
-    acc[`process.env.${key}`] = JSON.stringify(envConfig[key]);
-    return acc;
-}, {});
-const WrappedCallServerMethod = "const __call_server_method__ = (methodName, kwargs) => Millennium.callServerMethod(pluginName, methodName, kwargs)";
-const WrappedCallable = "const __wrapped_callable__ = (route) => MILLENNIUM_API.callable(__call_server_method__, route)";
 /**
  * @description Append the active plugin to the global plugin
  * list and notify that the frontend Loaded.
  */
 function ExecutePluginModule() {
-    // Assign the plugin on plugin list. 
-    Object.assign(window.PLUGIN_LIST[pluginName], millennium_main);
-    // Run the rolled up plugins default exported function 
-    millennium_main["default"]();
-    MILLENNIUM_BACKEND_IPC.postMessage(1, { pluginName: pluginName });
-}
-/**
- * @description Append the active plugin to the global plugin
- * list and notify that the frontend Loaded.
- */
-function ExecuteWebkitModule() {
-    // Assign the plugin on plugin list. 
-    Object.assign(window.PLUGIN_LIST[pluginName], millennium_main);
-    // Run the rolled up plugins default exported function 
-    millennium_main["default"]();
+    let MillenniumStore = window.MILLENNIUM_PLUGIN_SETTINGS_STORE[pluginName];
+    function OnPluginConfigChange(key, __, value) {
+        if (key in MillenniumStore.settingsStore) {
+            MillenniumStore.ignoreProxyFlag = true;
+            MillenniumStore.settingsStore[key] = value;
+            MillenniumStore.ignoreProxyFlag = false;
+        }
+    }
+    /** Expose the OnPluginConfigChange so it can be called externally */
+    MillenniumStore.OnPluginConfigChange = OnPluginConfigChange;
+    MILLENNIUM_BACKEND_IPC.postMessage(0, { pluginName: pluginName, methodName: '__builtins__.__millennium_plugin_settings_parser__' }).then((response) => {
+        /**
+         * __millennium_plugin_settings_parser__ will return false if the plugin has no settings.
+         * If the plugin has settings, it will return a base64 encoded string.
+         * The string is then decoded and parsed into an object.
+         */
+        if (typeof response.returnValue === 'string') {
+            MillenniumStore.ignoreProxyFlag = true;
+            /** Initialize the settings store from the settings returned from the backend. */
+            MillenniumStore.settingsStore = MillenniumStore.DefinePluginSetting(Object.fromEntries(JSON.parse(atob(response.returnValue)).map((item) => [item.functionName, item])));
+            MillenniumStore.ignoreProxyFlag = false;
+        }
+        /** @ts-ignore: call the plugin main after the settings have been parsed. This prevent plugin settings from being undefined at top level. */
+        let PluginModule = PluginEntryPointMain();
+        /** Assign the plugin on plugin list. */
+        Object.assign(window.PLUGIN_LIST[pluginName], {
+            ...PluginModule,
+            __millennium_internal_plugin_name_do_not_use_or_change__: pluginName,
+        });
+        /** Run the rolled up plugins default exported function */
+        PluginModule.default();
+        /** If the current module is a client module, post message id=1 which calls the front_end_loaded method on the backend. */
+        if (MILLENNIUM_IS_CLIENT_MODULE) {
+            MILLENNIUM_BACKEND_IPC.postMessage(1, { pluginName: pluginName });
+        }
+    });
 }
 /**
- * @description Simple bootstrap function that initializes PLUGIN_LIST
- * for current plugin given that is doesnt exist.
+ * @description Initialize the plugins settings store and the plugin list.
+ * This function is called once per plugin and is used to store the plugin settings and the plugin list.
  */
 function InitializePlugins() {
+    var _a, _b;
     /**
      * This function is called n times depending on n plugin count,
      * Create the plugin list if it wasn't already created
      */
-    !window.PLUGIN_LIST && (window.PLUGIN_LIST = {});
-    // initialize a container for the plugin
-    if (!window.PLUGIN_LIST[pluginName]) {
-        window.PLUGIN_LIST[pluginName] = {};
+    (_a = (window.PLUGIN_LIST || (window.PLUGIN_LIST = {})))[pluginName] || (_a[pluginName] = {});
+    (_b = (window.MILLENNIUM_PLUGIN_SETTINGS_STORE || (window.MILLENNIUM_PLUGIN_SETTINGS_STORE = {})))[pluginName] || (_b[pluginName] = {});
+    /**
+     * Accepted IPC message types from Millennium backend.
+     */
+    let IPCType;
+    (function (IPCType) {
+        IPCType[IPCType["CallServerMethod"] = 0] = "CallServerMethod";
+    })(IPCType || (IPCType = {}));
+    let MillenniumStore = window.MILLENNIUM_PLUGIN_SETTINGS_STORE[pluginName];
+    let IPCMessageId = `Millennium.Internal.IPC.[${pluginName}]`;
+    let isClientModule = MILLENNIUM_IS_CLIENT_MODULE;
+    const ComponentTypeMap = {
+        DropDown: ['string', 'number', 'boolean'],
+        NumberTextInput: ['number'],
+        StringTextInput: ['string'],
+        FloatTextInput: ['number'],
+        CheckBox: ['boolean'],
+        NumberSlider: ['number'],
+        FloatSlider: ['number'],
+    };
+    MillenniumStore.ignoreProxyFlag = false;
+    function DelegateToBackend(pluginName, name, value) {
+        console.log(`Delegating ${name} to backend`, value);
+        // print stack trace
+        const stack = new Error().stack?.split('\n').slice(2).join('\n');
+        console.log(stack);
+        return MILLENNIUM_BACKEND_IPC.postMessage(IPCType.CallServerMethod, {
+            pluginName,
+            methodName: '__builtins__.__update_settings_value__',
+            argumentList: { name, value },
+        });
     }
-}
-const ContructFunctions = (parts) => { return parts.join('\n'); };
-function InsertMillennium(props) {
-    const generateBundle = (_, bundle) => {
-        for (const fileName in bundle) {
-            if (bundle[fileName].type != 'chunk')
-                continue;
-            Logger.Info("Injecting Millennium shims into module... " + chalk.green.bold("okay"));
-            bundle[fileName].code = ContructFunctions([
-                `const pluginName = "${props.strPluginInternalName}";`,
-                InitializePlugins.toString(), InitializePlugins.name + "()",
-                WrappedCallServerMethod, WrappedCallable, bundle[fileName].code,
-                ExecutePluginModule.toString(), ExecutePluginModule.name + "()"
-            ]);
+    async function ClientInitializeIPC() {
+        /** Wait for the MainWindowBrowser to not be undefined */
+        while (typeof MainWindowBrowserManager === 'undefined') {
+            await new Promise((resolve) => setTimeout(resolve, 0));
+        }
+        MainWindowBrowserManager.m_browser.on('message', (messageId, data) => {
+            if (messageId !== IPCMessageId) {
+                return;
+            }
+            const { name, value } = JSON.parse(data);
+            MillenniumStore.ignoreProxyFlag = true;
+            MillenniumStore.settingsStore[name] = value;
+            DelegateToBackend(pluginName, name, value);
+            MillenniumStore.ignoreProxyFlag = false;
+        });
+    }
+    function WebkitInitializeIPC() {
+        SteamClient.BrowserView.RegisterForMessageFromParent((messageId, data) => {
+            if (messageId !== IPCMessageId) {
+                return;
+            }
+            const payload = JSON.parse(data);
+            MillenniumStore.ignoreProxyFlag = true;
+            MillenniumStore.settingsStore[payload.name] = payload.value;
+            MillenniumStore.ignoreProxyFlag = false;
+        });
+    }
+    isClientModule ? ClientInitializeIPC() : WebkitInitializeIPC();
+    const StartSettingPropagation = (name, value) => {
+        if (MillenniumStore.ignoreProxyFlag) {
+            return;
+        }
+        if (isClientModule) {
+            DelegateToBackend(pluginName, name, value);
+            /** If the browser doesn't exist yet, no use sending anything to it. */
+            if (typeof MainWindowBrowserManager !== 'undefined') {
+                MainWindowBrowserManager?.m_browser?.PostMessage(IPCMessageId, JSON.stringify({ name, value }));
+            }
+        }
+        else {
+            /** Send the message to the SharedJSContext */
+            SteamClient.BrowserView.PostMessageToParent(IPCMessageId, JSON.stringify({ name, value }));
         }
     };
-    return { name: String(), generateBundle };
+    function clamp(value, min, max) {
+        return Math.max(min, Math.min(max, value));
+    }
+    const DefinePluginSetting = (obj) => {
+        return new Proxy(obj, {
+            set(target, property, value) {
+                if (!(property in target)) {
+                    throw new TypeError(`Property ${String(property)} does not exist on plugin settings`);
+                }
+                const settingType = ComponentTypeMap[target[property].type];
+                const range = target[property]?.range;
+                /** Clamp the value between the given range */
+                if (settingType.includes('number') && typeof value === 'number') {
+                    if (range) {
+                        value = clamp(value, range[0], range[1]);
+                    }
+                    value || (value = 0); // Fallback to 0 if the value is undefined or null
+                }
+                /** Check if the value is of the proper type */
+                if (!settingType.includes(typeof value)) {
+                    throw new TypeError(`Expected ${settingType.join(' or ')}, got ${typeof value}`);
+                }
+                target[property].value = value;
+                StartSettingPropagation(String(property), value);
+                return true;
+            },
+            get(target, property) {
+                if (property === '__raw_get_internals__') {
+                    return target;
+                }
+                if (property in target) {
+                    return target[property].value;
+                }
+                return undefined;
+            },
+        });
+    };
+    MillenniumStore.DefinePluginSetting = DefinePluginSetting;
+    MillenniumStore.settingsStore = DefinePluginSetting({});
 }
-function InsertWebkitMillennium(props) {
+
+const envConfig = dotenv.config().parsed || {};
+if (envConfig) {
+    Logger.Info('Injecting environment variables...');
+}
+const envVars = Object.keys(envConfig).reduce((acc, key) => {
+    acc[key] = envConfig[key];
+    return acc;
+}, {});
+var ComponentType;
+(function (ComponentType) {
+    ComponentType[ComponentType["Plugin"] = 0] = "Plugin";
+    ComponentType[ComponentType["Webkit"] = 1] = "Webkit";
+})(ComponentType || (ComponentType = {}));
+const WrappedCallServerMethod = 'const __call_server_method__ = (methodName, kwargs) => Millennium.callServerMethod(pluginName, methodName, kwargs)';
+const WrappedCallable = 'const __wrapped_callable__ = (route) => MILLENNIUM_API.callable(__call_server_method__, route)';
+const ConstructFunctions = (parts) => {
+    return parts.join('\n');
+};
+function generate(code) {
+    /** Wrap it in a proxy */
+    return `let PluginEntryPointMain = function() { ${code} return millennium_main; };`;
+}
+function InsertMillennium(type, props) {
     const generateBundle = (_, bundle) => {
         for (const fileName in bundle) {
-            if (bundle[fileName].type != 'chunk')
+            if (bundle[fileName].type != 'chunk') {
                 continue;
-            Logger.Info("Injecting Millennium shims into webkit module... " + chalk.green.bold("okay"));
-            bundle[fileName].code = ContructFunctions([
+            }
+            Logger.Info('Injecting Millennium shims into ' + ComponentType[type] + ' module... ' + chalk.green.bold('okay'));
+            bundle[fileName].code = ConstructFunctions([
+                `const MILLENNIUM_IS_CLIENT_MODULE = ${type === ComponentType.Plugin ? 'true' : 'false'};`,
                 `const pluginName = "${props.strPluginInternalName}";`,
-                InitializePlugins.toString(), InitializePlugins.name + "()",
-                WrappedCallServerMethod, WrappedCallable, bundle[fileName].code,
-                ExecuteWebkitModule.toString(), ExecuteWebkitModule.name + "()"
+                InitializePlugins.toString(),
+                InitializePlugins.name + '()',
+                WrappedCallServerMethod,
+                WrappedCallable,
+                generate(bundle[fileName].code),
+                ExecutePluginModule.toString(),
+                ExecutePluginModule.name + '()',
             ]);
         }
     };
@@ -251,11 +386,13 @@ function GetPluginComponents(props) {
         tsConfigPath = './tsconfig.json';
     }
     const pluginList = [
-        InsertMillennium(props),
+        InsertMillennium(ComponentType.Plugin, props),
         typescript({
-            tsconfig: tsConfigPath
+            tsconfig: tsConfigPath,
         }),
-        resolve(), commonjs(), json(),
+        resolve(),
+        commonjs(),
+        json(),
         injectProcessEnv(envVars),
         replace({
             delimiters: ['', ''],
@@ -264,7 +401,8 @@ function GetPluginComponents(props) {
             'Millennium.callServerMethod': `__call_server_method__`,
             'client.callable': `__wrapped_callable__`,
             'client.pluginSelf': 'window.PLUGIN_LIST[pluginName]',
-            'client.Millennium.exposeObj(': 'client.Millennium.exposeObj(exports, '
+            'client.Millennium.exposeObj(': 'client.Millennium.exposeObj(exports, ',
+            'client.BindPluginSettings()': 'client.BindPluginSettings(pluginName)',
         }),
     ];
     if (props.bTersePlugin) {
@@ -274,22 +412,25 @@ function GetPluginComponents(props) {
 }
 function GetWebkitPluginComponents(props) {
     const pluginList = [
-        InsertWebkitMillennium(props),
+        InsertMillennium(ComponentType.Webkit, props),
         typescript({
-            tsconfig: './webkit/tsconfig.json'
+            tsconfig: './webkit/tsconfig.json',
         }),
-        resolve(), commonjs(), json(),
+        resolve(),
+        commonjs(),
+        json(),
         injectProcessEnv(envVars),
         replace({
             delimiters: ['', ''],
             preventAssignment: true,
             'Millennium.callServerMethod': `__call_server_method__`,
             'webkit.callable': `__wrapped_callable__`,
+            'client.BindPluginSettings()': 'client.BindPluginSettings(pluginName)',
         }),
         babel({
             presets: ['@babel/preset-env', '@babel/preset-react'],
             babelHelpers: 'bundled',
-        })
+        }),
     ];
     props.bTersePlugin && pluginList.push(terser());
     return pluginList;
@@ -297,10 +438,10 @@ function GetWebkitPluginComponents(props) {
 const GetFrontEndDirectory = () => {
     const pluginJsonPath = './plugin.json';
     try {
-        return JSON.parse(fs.readFileSync(pluginJsonPath, 'utf8'))?.frontend ?? "frontend";
+        return JSON.parse(fs.readFileSync(pluginJsonPath, 'utf8'))?.frontend ?? 'frontend';
     }
     catch (error) {
-        return "frontend";
+        return 'frontend';
     }
 };
 const TranspilerPluginComponent = async (props) => {
@@ -313,25 +454,26 @@ const TranspilerPluginComponent = async (props) => {
                 Logger.Error('The @steambrew/webkit module should not be included in the frontend module, use @steambrew/client instead. Please remove it from the frontend module and try again.');
                 process.exit(1);
             }
-            return id === '@steambrew/client' || id === 'react' || id === 'react-dom';
+            return id === '@steambrew/client' || id === 'react' || id === 'react-dom' || id === 'react-dom/client';
         },
         output: {
-            name: "millennium_main",
-            file: ".millennium/Dist/index.js",
+            name: 'millennium_main',
+            file: '.millennium/Dist/index.js',
             globals: {
-                "react": "window.SP_REACT",
-                "react-dom": "window.SP_REACTDOM",
-                "@steambrew/client": "window.MILLENNIUM_API"
+                react: 'window.SP_REACT',
+                'react-dom': 'window.SP_REACTDOM',
+                'react-dom/client': 'window.SP_REACTDOM',
+                '@steambrew/client': 'window.MILLENNIUM_API',
             },
             exports: 'named',
-            format: 'iife'
-        }
+            format: 'iife',
+        },
     };
-    Logger.Info("Starting build; this may take a few moments...");
+    Logger.Info('Starting build; this may take a few moments...');
     try {
         await (await rollup(frontendRollupConfig)).write(frontendRollupConfig.output);
         if (fs.existsSync(`./webkit/index.tsx`)) {
-            Logger.Info("Compiling webkit module...");
+            Logger.Info('Compiling webkit module...');
             const webkitRollupConfig = {
                 input: `./webkit/index.tsx`,
                 plugins: GetWebkitPluginComponents(props),
@@ -344,14 +486,14 @@ const TranspilerPluginComponent = async (props) => {
                     return id === '@steambrew/webkit';
                 },
                 output: {
-                    name: "millennium_main",
-                    file: ".millennium/Dist/webkit.js",
+                    name: 'millennium_main',
+                    file: '.millennium/Dist/webkit.js',
                     exports: 'named',
                     format: 'iife',
                     globals: {
-                        "@steambrew/webkit": "window.MILLENNIUM_API"
+                        '@steambrew/webkit': 'window.MILLENNIUM_API',
                     },
-                }
+                },
             };
             await (await rollup(webkitRollupConfig)).write(webkitRollupConfig.output);
         }

package/index.ts

@@ -1,65 +1,65 @@
-#!/usr/bin/env node
-
-/**
- * this component serves as:
- * - typescript transpiler
- * - rollup configurator
- */
-import { BuildType, ValidateParameters } from "./Parameters"
-import { CheckForUpdates } from "./VersionMon"
-import { ValidatePlugin } from './Linter'
-import { TranspilerPluginComponent, TranspilerProps } from './Compiler'
-import { performance } from 'perf_hooks';
-import { Logger } from "./Logger";
-// import { Logger } from './Logger'
-
-declare global {
-    var PerfStartTime: number;
-}
-
-const CheckModuleUpdates = async () => {
-    return await CheckForUpdates()
-}
-
-const StartCompilerModule = () => {
-
-    const parameters   = ValidateParameters( process.argv.slice(2) );
-    const bTersePlugin = parameters.type == BuildType.ProdBuild
-
-    Logger.Tree("Transpiler config: ", {
-        target: parameters.targetPlugin,
-        build: BuildType[parameters.type],
-        minify: bTersePlugin
-    })
-
-    ValidatePlugin(parameters.targetPlugin).then((json: any) => {
-
-        const props: TranspilerProps = {
-            bTersePlugin: bTersePlugin,
-            strPluginInternalName: json?.name
-        }
-
-        TranspilerPluginComponent(props)
-    })
-
-    /**
-     * plugin is invalid, we close the proccess as it has already been handled
-     */
-    .catch(() => {
-        process.exit()
-    }) 
-}
-
-const Initialize = () => {
-    global.PerfStartTime = performance.now();
-
-    // Check for --no-update flag
-    if (process.argv.includes("--no-update")) {
-        StartCompilerModule()
-        return
-    }
-
-    CheckModuleUpdates().then(StartCompilerModule)
-}
-
+#!/usr/bin/env node
+
+/**
+ * this component serves as:
+ * - typescript transpiler
+ * - rollup configurator
+ */
+import { BuildType, ValidateParameters } from "./Parameters"
+import { CheckForUpdates } from "./VersionMon"
+import { ValidatePlugin } from './Linter'
+import { TranspilerPluginComponent, TranspilerProps } from './Compiler'
+import { performance } from 'perf_hooks';
+import { Logger } from "./Logger";
+// import { Logger } from './Logger'
+
+declare global {
+    var PerfStartTime: number;
+}
+
+const CheckModuleUpdates = async () => {
+    return await CheckForUpdates()
+}
+
+const StartCompilerModule = () => {
+
+    const parameters   = ValidateParameters( process.argv.slice(2) );
+    const bTersePlugin = parameters.type == BuildType.ProdBuild
+
+    Logger.Tree("Transpiler config: ", {
+        target: parameters.targetPlugin,
+        build: BuildType[parameters.type],
+        minify: bTersePlugin
+    })
+
+    ValidatePlugin(parameters.targetPlugin).then((json: any) => {
+
+        const props: TranspilerProps = {
+            bTersePlugin: bTersePlugin,
+            strPluginInternalName: json?.name
+        }
+
+        TranspilerPluginComponent(props)
+    })
+
+    /**
+     * plugin is invalid, we close the proccess as it has already been handled
+     */
+    .catch(() => {
+        process.exit()
+    }) 
+}
+
+const Initialize = () => {
+    global.PerfStartTime = performance.now();
+
+    // Check for --no-update flag
+    if (process.argv.includes("--no-update")) {
+        StartCompilerModule()
+        return
+    }
+
+    CheckModuleUpdates().then(StartCompilerModule)
+}
+
 Initialize();

package/package.json

@@ -1,40 +1,38 @@
-{
-  "name": "@steambrew/ttc",
-  "version": "1.2.1",
-  "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "bin": {
-    "millennium-ttc": "dist/index.js"
-  },
-  "scripts": {
-    "build": "rollup -c"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "description": "A tiny typescript compiler for Millennium plugins.",
-  "dependencies": {
-    "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-replace": "^6.0.1",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.1.1",
-    "chalk": "^5.3.0",
-    "dotenv": "^16.4.7",
-    "fs": "^0.0.1-security",
-    "rollup": "^4.28.0",
-    "rollup-plugin-inject-process-env": "^1.3.1",
-    "tslib": "^2.8.1"
-  },
-  "devDependencies": {
-    "@types/node": "^22.10.1"
-  }
-}
+{
+	"name": "@steambrew/ttc",
+	"version": "1.4.2",
+	"type": "module",
+	"main": "dist/index.js",
+	"module": "dist/index.js",
+	"bin": {
+		"millennium-ttc": "dist/index.js"
+	},
+	"scripts": {
+		"build": "rollup -c",
+		"prepare": "npm run build"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC",
+	"description": "A tiny typescript compiler for Millennium plugins.",
+	"dependencies": {
+		"@babel/preset-env": "^7.26.0",
+		"@babel/preset-react": "^7.25.9",
+		"@rollup/plugin-babel": "^6.0.4",
+		"@rollup/plugin-commonjs": "^28.0.1",
+		"@rollup/plugin-json": "^6.1.0",
+		"@rollup/plugin-node-resolve": "^15.3.0",
+		"@rollup/plugin-replace": "^6.0.1",
+		"@rollup/plugin-terser": "^0.4.4",
+		"@rollup/plugin-typescript": "^12.1.1",
+		"chalk": "^5.3.0",
+		"dotenv": "^16.4.7",
+		"fs": "^0.0.1-security",
+		"rollup": "^4.28.0",
+		"rollup-plugin-inject-process-env": "^1.3.1",
+		"tslib": "^2.8.1"
+	}
+}