fixed lots of circular imports

Rundll86 · Nov 24, 2024 · c40fb80 · c40fb80
1 parent 728ff7a
commit c40fb80
Show file tree

Hide file tree

Showing 12 changed files with 150 additions and 66 deletions.
diff --git a/config/loader.ts b/config/loader.ts
@@ -1,5 +1,7 @@
-export default ({
+type LoaderConfig = import("@framework/internal").LoaderConfig;
+const config: LoaderConfig = {
     target: import("@samples/fs-iframe/extension"),
     errorCatches: [],
-    platform: ["GandiIDE"]
-} as import("@framework/internal").LoaderConfig)
+    platform: ["TurboWarp"]
+}
+export default { ...config };
diff --git a/config/server.js b/config/server.js
@@ -0,0 +1,10 @@
+module.exports = {
+    waterBox: {
+        port: 25565,
+        output: "ui"
+    },
+    extension: {
+        port: 19312,
+        output: "extension"
+    }
+};
diff --git a/package.json b/package.json
@@ -3,15 +3,18 @@
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
-    "dist": "webpack --mode production",
-    "dev": "webpack serve --mode development"
+    "dist:ui": "webpack --mode production --config webpack.config.ui.js",
+    "dist:ext": "webpack --mode production --config webpack.config.ext.js",
+    "dev:ui": "webpack serve --mode development --config webpack.config.ui.js",
+    "dev:ext": "webpack serve --mode development --config webpack.config.ext.js"
   },
   "author": "FallingShrimp",
   "license": "ISC",
   "devDependencies": {
     "@types/md5": "^2.3.5",
     "css-loader": "^7.1.2",
     "html-webpack-plugin": "^5.6.3",
+    "style-loader": "^4.0.0",
     "ts-loader": "^9.5.1",
     "typescript": "^5.6.3",
     "vue-loader": "^17.4.2",

diff --git a/src/fs-context/entry.ts b/src/fs-context/entry.ts
@@ -1,14 +1,13 @@
-import { Extensions } from ".";
-import { ScratchWaterBoxed } from "./internal";
+import { Extensions } from "."
 export default async function load() {
-    let currentScratch = Extensions.getScratch() as ScratchWaterBoxed;
+    let currentScratch = Extensions.getScratch() as import("@framework/internal").ScratchWaterBoxed;
     if (currentScratch) {
         let loaderConfig = Extensions.config.loader;
         let { default: target } = await loaderConfig.target;
-        let extensionLoaded = Extensions.load(target);
+        let extensionLoaded = await Extensions.load(target);
         extensionLoaded.debugPrint();
         extensionLoaded.to(...loaderConfig.platform);
         Extensions.isInWaterBoxed() ? currentScratch.loadTempExt() : null;
     };
 };
-load();
+export const result = load();
diff --git a/src/fs-context/index.ts b/src/fs-context/index.ts
@@ -1,37 +1,43 @@
 import { GlobalResourceMachine, LoaderConfig, ObjectInclude, PlatformSupported, Scratch, ScratchWaterBoxed } from "./internal";
-import { Extension, Menu, Version } from "./structs";
 import loaderConfig from "@config/loader";
+if (!window._FSContext) {
+    window._FSContext = {
+        EXTENSIONS: {},
+        EXPORTED: {}
+    };
+};
 export namespace Extensions {
     const inputTypeCastToScratch: any = {
         bool: "Boolean",
         "hat-paramater": "ccw_hat_parameter"
-    }
-    function generateConstructor(extension: new () => Extension): any {
-        var constructor = new extension();
+    };
+    async function generateConstructor(extension: new () => import("./structs").Extension): Promise<any> {
+        const { Version, Menu } = await import("./structs");
+        var ext = new extension();
         var context = getFSContext();
         function ExtensionConstructor(this: any, runtime: Scratch) {
-            if (!runtime.extensions?.unsandboxed && !constructor.allowSandboxed) {
-                throw new Error(`FSExtension "${constructor.id}" must be supported unsandboxed.`)
+            if (!runtime.extensions?.unsandboxed && !ext.allowSandboxed) {
+                throw new Error(`FSExtension "${ext.id}" must be supported unsandboxed.`)
             };
-            for (let i in constructor.requires) {
+            for (let i in ext.requires) {
                 if (!Object.keys(context.EXTENSIONS).includes(i)) {
-                    throw new Error(`FSExtension "${constructor.id}" requires ${i} to be loaded.`)
+                    throw new Error(`FSExtension "${ext.id}" requires ${i} to be loaded.`)
                 }
-                if (Version.compare(context.EXTENSIONS[i], constructor.requires[i]) === constructor.requires[i]) {
-                    throw new Error(`FSExtension "${constructor.id}" requires ${i} to be at least ${constructor.requires[i]}.`)
+                if (Version.compare(context.EXTENSIONS[i], ext.requires[i]) === ext.requires[i]) {
+                    throw new Error(`FSExtension "${ext.id}" requires ${i} to be at least ${ext.requires[i]}.`)
                 };
             };
-            constructor.init(runtime);
-            constructor.blocks.forEach(block => {
+            ext.init(runtime);
+            ext.blocks.forEach(block => {
                 block.arguments.forEach((arg) => {
                     if (arg.inputType === "menu" && arg.value instanceof Menu) {
-                        constructor.menus.push(arg.value);
+                        ext.menus.push(arg.value);
                         arg.value = arg.value.name;
                     }
                 });
             });
             let blocks: any[] = [];
-            for (let block of constructor.blocks) {
+            for (let block of ext.blocks) {
                 let args: any = {};
                 let currentBlock = {
                     opcode: block.opcode,
@@ -52,11 +58,11 @@ export namespace Extensions {
                         args[arg.content] = currentArg;
                     }
                 }
-                this[currentBlock.opcode] = (arg: any) => JSON.stringify(block.method.call(constructor, arg));
+                this[currentBlock.opcode] = (arg: any) => JSON.stringify(block.method.call(ext, arg));
                 blocks.push(currentBlock);
             }
             let menus: any = {};
-            for (let menu of constructor.menus) {
+            for (let menu of ext.menus) {
                 menus[menu.name] = {
                     acceptReporters: menu.acceptReporters,
                     items: menu.items.map((item) => {
@@ -67,23 +73,23 @@ export namespace Extensions {
                     })
                 };
             }
-            constructor.calcColor();
+            ext.calcColor();
             this.getInfo = function () {
                 return {
-                    id: constructor.id,
-                    name: constructor.displayName,
+                    id: ext.id,
+                    name: ext.displayName,
                     blocks,
                     menus,
-                    color1: constructor.colors.block,
-                    color2: constructor.colors.inputer,
-                    color3: constructor.colors.menu
+                    color1: ext.colors.block,
+                    color2: ext.colors.inputer,
+                    color3: ext.colors.menu
                 }
             }
         }
         return ExtensionConstructor;
     }
     export const config: ObjectInclude<LoaderConfig, "loader"> = {
-        loader: loaderConfig as LoaderConfig
+        loader: loaderConfig
     }
     export function isInWaterBoxed() {
         return !!window.ScratchWaterBoxed;
@@ -94,24 +100,19 @@ export namespace Extensions {
         return null;
     }
     export function getFSContext(): GlobalResourceMachine {
-        if (!window._FSContext) {
-            window._FSContext = {
-                EXTENSIONS: {},
-                EXPORTED: {}
-            };
-        }
-        return window._FSContext;
+        return window._FSContext as GlobalResourceMachine;
     }
-    export function load(extension: new () => Extension) {
+    export async function load(extension: new () => import("./structs").Extension) {
         let constructorPlain = extension
-        let constructorGenerated = generateConstructor(extension);
+        let constructorGenerated = await generateConstructor(extension);
         let objectPlain = new constructorPlain();
         let objectGenerated = new constructorGenerated(getScratch());
         let scratch = getScratch() as ScratchWaterBoxed;
         return {
             objectPlain,
             objectGenerated,
             to(...platforms: PlatformSupported[]) {
+                console.log(platforms);
                 for (let platform of platforms) {
                     console.log(`Trying to load FSExtension "${objectPlain.id}" on platform "${platform}"...`);
                     if (platform === "TurboWarp") {

diff --git a/src/fs-context/samples/fs-iframe/extension.ts b/src/fs-context/samples/fs-iframe/extension.ts
@@ -5,17 +5,18 @@ import "./style.css";
 let translator = Translator.create("zh-cn", {
     name: "内嵌网页",
     description: "使用iframe嵌入网页",
-    create: "创建名为$name的Iframe于$pos，尺寸$size",
+    create: "创建名为$name的Iframe于$pos，尺寸$size，图层$layer",
     setUrl: "设置$name的URL为$url",
     move: "移动$name到$pos",
-    resize: "调整$name的尺寸为$size"
+    resize: "调整$name的尺寸为$size",
+    setLayer: "设置$name的图层为$layer",
 });
 interface Position {
     x: number;
     y: number;
 }
 export default class FSIFrame extends Extension {
-    id = "fs-iframe";
+    id = "fsiframe";
     displayName = translator.load("name");
     version = new Version(1, 0, 0);
     description = translator.load("description");
@@ -35,6 +36,10 @@ export default class FSIFrame extends Extension {
                 {
                     name: "$size",
                     value: "480 270"
+                },
+                {
+                    name: "$layer",
+                    value: "0"
                 }
             ]
         }, function createIF(arg) {
@@ -46,6 +51,7 @@ export default class FSIFrame extends Extension {
                 .style("top", `${pos.y}px`)
                 .style("width", `${size.x}px`)
                 .style("height", `${size.y}px`)
+                .style("zIndex", arg.$layer)
                 .attribute("id", `fsiframe-${arg.$name}`);
             dataStore.read("rootBase").child(iframe);
             dataStore.write("iframes", iframe);
@@ -95,6 +101,20 @@ export default class FSIFrame extends Extension {
             let iframe = document.getElementById(`fsiframe-${arg.$name}`);
             iframe?.style.setProperty("width", `${size.x}px`);
             iframe?.style.setProperty("height", `${size.y}px`);
+        }),
+        Block.create(translator.load("setLayer"), {
+            arguments: [
+                {
+                    name: "$name"
+                },
+                {
+                    name: "$layer",
+                    value: "0"
+                }
+            ]
+        }, function setLayer(arg) {
+            let iframe = document.getElementById(`fsiframe-${arg.$name}`);
+            iframe?.style.setProperty("zIndex", arg.$layer);
         })
     ]
     init(runtime: Scratch) {

diff --git a/src/fs-context/structs.ts b/src/fs-context/structs.ts
@@ -1,5 +1,5 @@
 import { Extensions } from ".";
-import { ArgumentDefine, ArgumentPart, BlockType, ColorDefine, MethodFunction, HexColorString, MenuItem, TranslatorStoredData, LanguageSupported, LanguageStored, BlockConfigB, ExtractField, Scratch, ObjectInclude, VersionString } from "./internal";
+import { ArgumentDefine, ArgumentPart, BlockType, ColorDefine, MethodFunction, MenuItem, TranslatorStoredData, LanguageSupported, LanguageStored, BlockConfigB, ExtractField, Scratch, ObjectInclude, VersionString } from "./internal";
 import md5 from "md5";
 import { Unnecessary } from "./tools";
 export class Extension {

diff --git a/src/fs-context/tools.ts b/src/fs-context/tools.ts
@@ -1,9 +1,8 @@
 import md5 from "md5";
-import { Extensions } from ".";
 import { ElementContext, GlobalResourceMachine, HexColorString } from "./internal";
 import { DataStorer, Extension } from "./structs";
 export namespace GlobalContext {
-    let context: GlobalResourceMachine = Extensions.getFSContext() as GlobalResourceMachine;
+    let context: GlobalResourceMachine = window._FSContext as GlobalResourceMachine;
     export function createDataStore<T extends { [key: string]: any }>(forExt: new () => Extension, datas: T): DataStorer<T> {
         let { id } = new forExt;
         if (Object.hasOwn(context.EXPORTED, id)) {

diff --git a/src/fs-context/ui/componets/WaterBox.vue b/src/fs-context/ui/componets/WaterBox.vue
@@ -43,9 +43,11 @@ import ScratchBlock from "./ScratchBlock.vue";
 import { ref } from "vue";
 import ScratchStage from "./ScratchStage.vue";
 import { Menu } from "@framework/structs";
+import serverConfig from "@config/server";
 function reloadExtension() {
     extensionLoaded.value = false;
-    import("@framework/entry").then(() => {
+    import("../../entry").then(async (e) => {
+        await e.result;
         let ext = window.ScratchWaterBoxed.currentExtensionPlain;
         ext.calcColor();
         colorBlock.value = ext.colors.block;
@@ -61,15 +63,13 @@ function reloadExtension() {
     });
 }
 function copyExtensionUrl() {
-    let url = window.location.href + "extension.dist.js";
+    let url = window.location.protocol + "//" + window.location.hostname + ":" + serverConfig.extension.port + "/" + serverConfig.extension.output + ".dist.js";
     try {
         navigator.clipboard.writeText(url);
+        alert("已复制");
     }
-    catch {
-        console.log("Copy failed.");
-    }
-    finally {
-        alert("已尝试自动复制，若复制失败请手动选中复制：\n" + url);
+    catch (e) {
+        alert("已尝试自动复制，但复制失败，请手动选中复制：\n" + url + `\n${e}`);
     }
 }
 function findMenu(name) {

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es2022",
-    "module": "commonjs",
+    "target": "ESNext",
+    "module": "CommonJS",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,

diff --git a/webpack.config.ext.js b/webpack.config.ext.js
@@ -0,0 +1,52 @@
+const WebpackBar = require("webpackbar");
+const path = require("path");
+const serverConfig = require("./config/server");
+module.exports = {
+    entry: "@framework/entry.ts",
+    output: {
+        filename: `${serverConfig.extension.output}.dist.js`,
+        path: path.resolve(__dirname, `dist/${serverConfig.extension.output}`),
+        clean: true
+    },
+    module: {
+        rules: [
+            {
+                test: /\.ts$/i,
+                use: "ts-loader"
+            },
+            {
+                test: /\.css$/i,
+                use: ["style-loader", "css-loader"]
+            }
+        ]
+    },
+    resolve: {
+        extensions: [".ts", ".js"],
+        alias: {
+            "@framework": path.resolve(__dirname, "src/fs-context"),
+            "@src": path.resolve(__dirname, "src"),
+            "@config": path.resolve(__dirname, "config"),
+            "@samples": path.resolve(__dirname, "src/fs-context/samples")
+        }
+    },
+    plugins: [
+        new WebpackBar({
+            name: "Extension",
+            color: "green"
+        })
+    ],
+    devServer: {
+        static: "./",
+        headers: {
+            'Access-Control-Allow-Origin': '*'
+        },
+        port: serverConfig.extension.port,
+        compress: true,
+        hot: false,
+        liveReload: false,
+        webSocketServer: false,
+        client: {
+            overlay: false
+        }
+    }
+}