@mybricks/cloud-com-loader - npm Package Compare versions

Comparing version 1.0.3-beta1 to 1.0.3-beta10

package.json

 {
   "name": "@mybricks/cloud-com-loader",
-  "version": "1.0.3-beta1",
+  "version": "1.0.3-beta10",
   "description": "",
@@ -30,5 +30,4 @@ "main": "index.js",
     "@babel/types": "^7.19.4",
-    "@mybricks/render-web": "^1.0.9",
-    "@vue/compiler-dom": "^3.2.41",
-    "react": "^18.2.0",
+    "@mybricks/render-web": "1.0.15-beta1",
+    "@vue/compiler-dom": "^3.2.45",
     "veaury": "^2.3.9"
@@ -39,4 +38,6 @@ },
     "@types/react-dom": "^18.0.8",
+    "css-loader": "^6.7.1",
     "portfinder-sync": "0.0.2",
-    "vue-loader": "^17.0.1",
+    "style-loader": "^3.3.1",
+    "vue-loader": "^16.0.1",
     "webpack-cli": "^4.10.0",
@@ -43,0 +44,0 @@ "webpack-dev-server": "^4.11.1"

src/const.js

 // 分割符
-exports.separator = "&&**";
+exports.separator = "&&**";
+
+// 默认defKeyword
+exports.defKeyword = "def";
+
+// 默认api
+exports.api = "https://mybricks.world/api/material/namespace/content";

src/loader.js

@@ -5,2 +5,3 @@ const { getOptions } = require("loader-utils");
 const reactLoader = require("./react");
+const { api, defKeyword } = require("./const");
 
@@ -23,16 +24,23 @@ const loaderMap = {
   // 未正确配置options
-  if (!Array.isArray(configs) || !configs.length) {
-    // TODO 更多的配置提示
-    console.error("请正确配置options")
-    return source;
-  }
+  // if (!Array.isArray(configs) || !configs.length) {
+  //   // TODO 更多的配置提示
+  //   console.error("请正确配置options")
+  //   return source;
+  // }
 
   const loaderType = type.trim().toLowerCase();
   // 标签名对应的配置
-  const tagNameMap = {};
+  const tagNameMap = {
+    Mybricks: {
+      api,
+      defKeyword
+    }
+  };
 
-  configs.forEach(({tagName, defKeyword, api}) => {
-    // 标签名称对应配置内容
-    tagNameMap[tagName] = { defKeyword, api };
-  });
+  if (Array.isArray(configs)) {
+    configs.forEach(({tagName, defKeyword, api}) => {
+      // 标签名称对应配置内容
+      tagNameMap[tagName] = { defKeyword, api };
+    });
+  }
 
@@ -39,0 +47,0 @@ return loaderMap[loaderType]?.(source, tagNameMap) || source;

src/react/index.js

@@ -40,7 +40,15 @@ const fs = require("fs");
   let importComsCode = `
+    import React from "react";
     import ErrorBoundary from "${ErrorBoundary}";
     import renderCom from "${renderCom}";
+
+    if (!window.React) {
+      window.React = React;
+    }
+
     const comDefs = {};\n
   `;
 
+  const map = {}
+
   deps.forEach(dep => {
@@ -54,6 +62,10 @@ const {
 
+    if (map[CloudComponentName]) return
+
+    map[CloudComponentName] = true
+
     importComsCode = importComsCode + `
       import ${CloudComponentName} from "${CloudComponentPath}";
       comDefs["${namespace}-${version}"] = {
-        runtime: ${CloudComponentName}
+        runtime: ${CloudComponentName}.runtime
       };\n
@@ -239,3 +251,3 @@ `
                 // 依赖组件数组/运行时代码
-                let { deps, runtime } = data;
+                let { deps, runtime, inputs, outputs } = data;
 
@@ -257,4 +269,50 @@ let resultRuntime = runtime.trim();
                   if (resultRuntime.startsWith("function")) {
+                    const inputsMap = {};
+                    inputs.forEach(input => {
+                      inputsMap[input.id] = 1;
+                    })
+                    const outputsMap = {};
+                    outputs.forEach(output => {
+                      outputsMap[output.id] = 1;
+                    })
+
                     // 源码
-                    resultRuntime = getImportComsCode(completeDeps) + resultRuntime.replace("function", "function RenderCom") + CloudComponentCode({namespace, version});
+                    resultRuntime = getImportComsCode(completeDeps) + resultRuntime.replace("function", "function RenderCom") + `
+                      export default function (props) {
+                        var inputs = ${JSON.stringify(inputs)};
+                      var outputs = ${JSON.stringify(outputs)};
+
+                      var relInputs = {};
+                      var relOutputs = {};
+
+                      inputs.forEach(ipt => {
+                        var id = ipt.id;
+                        if (id in props) {
+                          var v = props[id];
+                          relInputs[id] = function(fn) {
+                            fn(v)
+                          };
+                        };
+                      })
+                      outputs.forEach(opt => {
+                        var id = opt.id;
+
+                        if (id in props) {
+                          var v = props[id];
+                          relOutputs[opt.id] = function(val) {
+                            v(val);
+                          }
+                        }
+                      })
+                      
+
+                      return React.createElement(RenderCom, {env: {
+                        renderCom: (json, opts) => {
+                          return new Promise((resolve) => {
+                            renderCom(json, opts, comDefs).then(resolve);
+                          })
+                        }
+                      },inputs: relInputs,outputs: relOutputs});
+                      }
+                  `;
   
@@ -261,0 +319,0 @@ fs.writeFileSync(CloudComponentPath, resultRuntime);

src/vue/index.js

@@ -6,3 +6,3 @@ const fs = require("fs");
 
-const { separator } = require("../const");
+const { api: defaultApi, defKeyword: defaultDefKeyword, separator } = require("../const");
 const { initComsDir, getCompleteDeps, getCloudComponentInfo } = require("../utils");
@@ -15,5 +15,3 @@
 const globalImportComsMap = JSON.parse(fs.readFileSync(comsMapPath, "utf-8"));
-// const ErrorBoundary = path.join(__dirname, "./MybricksCloudComponentErrorBoundary.jsx");
 const renderCom = path.join(__dirname, "./MybricksCloudComponentRenderCom.js");
-// const constFile = path.join(__dirname, "./MybricksCloudComponentConst.js");
 const ComponentDefError = path.join(__dirname, "./MybricksCloudComponentDefError.vue");
@@ -25,3 +23,3 @@
       <div style="font-size: 12px;color: #f5222d; overflow: hidden">
-        组件 (tagName = ${tagName}, namespace = ${namespace}, version = ${version}）未找到.
+        组件（tagName = ${tagName}, namespace = ${namespace}, version = ${version}）未找到.
       </div>
@@ -32,3 +30,2 @@ </template>
 
-
 module.exports = async function (source, tagNameMap) {
@@ -50,12 +47,10 @@ const sourceAst = compilerDOM.parse(source);
 
-  function defError (locSource, {tagName, defValue}) {
+  function defError (locSource, {tagName = "", value = ""}) {
     // 是否已导入一个Deferror组件
     if (!hasDefError) {
       hasDefError = true;
-      scriptImportStr = scriptImportStr + `import WebpackLoaderFangzhouCloudComponentDefError from "${ComponentDefError}"`;
+      scriptImportStr = scriptImportStr + `import WebpackLoaderFangzhouCloudComponentDefError from "${ComponentDefError}";\n`;
     }
 
-    console.log({tagName, defValue}, "{tagName, defValue}")
-
-    source = source.replace(locSource, `<WebpackLoaderFangzhouCloudComponentDefError tagName="${tagName}" defValue="${defValue || "未配置"}" />`);
+    source = source.replace(new RegExp(locSource, 'g'), `<WebpackLoaderFangzhouCloudComponentDefError tagName="${tagName}" value="${value}" />`);
   }
@@ -71,6 +66,23 @@
         // 组件加载资源地址/def信息保留字段
-        const { defKeyword } = tagNameConfig;
-        const def = props.find(p => p.name === defKeyword);
+        const { api = defaultApi, defKeyword = defaultDefKeyword } = tagNameConfig;
         const locSource = loc.source;
 
+        if (!api || typeof api !== "string") {
+          defError(locSource, {
+            tagName,
+            value: "未正确配置api"
+          });
+          return;
+        }
+
+        if (!defKeyword || typeof defKeyword !== "string") {
+          defError(locSource, {
+            tagName,
+            value: "未正确配置defKeyword"
+          });
+          return;
+        }
+
+        const def = props.find(p => p.name === defKeyword);
+
         if (def) {
@@ -85,5 +97,5 @@ // 有配置def
             const comsMapKey = `${tagName}${separator}${defValue}`;
-            const { CloudComponentName, CloudComponentPath } = getCloudComponentInfo({tagName, version, namespace, pathPrefix, fileType: "vue"});
+            const { CloudComponentName, CloudComponentPath } = getCloudComponentInfo({tagName, version, namespace, pathPrefix, fileType: "js"});
 
-            source = source.replace(locSource, locSource.replace(new RegExp(tagName, 'g'), CloudComponentName));
+            source = source.replace(new RegExp(locSource, 'g'), locSource.replace(new RegExp(tagName, 'g'), CloudComponentName));
 
@@ -99,3 +111,3 @@ if (!importComsMap[comsMapKey]) {
 
-              scriptImportStr = scriptImportStr + `import ${CloudComponentName} from "${CloudComponentPath}"`;
+              scriptImportStr = scriptImportStr + `import ${CloudComponentName} from "${CloudComponentPath}";\n`;
             }
@@ -106,3 +118,3 @@ } else {
               tagName,
-              defValue
+              value: `未正确配置${defKeyword}（namespace@version）`
             });
@@ -114,3 +126,3 @@ }
             tagName,
-            defValue: ""
+            value: `未配置${defKeyword}`
           });
@@ -153,3 +165,3 @@ }
           const comApiParams = `namespace=${namespace}&version=${version}`;
-          let comApi = tagNameMap[tagName].api;
+          let comApi = tagNameMap[tagName].api || defaultApi;
 
@@ -162,5 +174,5 @@ comApi = comApi + `${/\?/.test(comApi) ? "&" : "?"}${comApiParams}`;
             request(comApi, function (error, response, body) {
-              if (response.statusCode !== 200) {
+              if (error || !response || response.statusCode !== 200) {
                 errorComponent({
-                  ComponentPath: CloudComponentPath,
+                  ComponentPath: CloudComponentPath.replace(".js", ".vue"),
                   tagName,
@@ -170,2 +182,5 @@ namespace,
                 });
+
+                scriptImportStr = scriptImportStr.replace(`import ${CloudComponentName} from "${CloudComponentPath}"`, `import ${CloudComponentName} from "${CloudComponentPath.replace(".js", ".vue")}"`);
+                
                 resolve(true);
@@ -176,4 +191,6 @@ } else {
                 // 依赖组件数组/运行时代码
-                let { deps, runtime } = data;
+                let { deps, runtime, inputs, outputs } = data;
 
+                // console.log(runtime, namespace)
+
                 let resultRuntime = runtime.trim();
@@ -188,3 +205,3 @@
 
-                const completeDeps = getCompleteDeps(deps, tagName, pathPrefix, "vue");
+                const completeDeps = getCompleteDeps(deps, tagName, pathPrefix, "js");
 
@@ -195,16 +212,52 @@ // 区分组件入口
                   if (resultRuntime.startsWith("function")) {
+                    const inputsMap = {};
+                    inputs.forEach(input => {
+                      inputsMap[input.id] = 1;
+                    })
+                    const outputsMap = {};
+                    outputs.forEach(output => {
+                      outputsMap[output.id] = 1;
+                    })
+                    
                     // 源码
-                    resultRuntime = getImportComsCode(completeDeps) + resultRuntime.replace("function", "function RenderCom");
-  
-                    fs.writeFileSync(CloudComponentPath, resultRuntime);
-                  } else {
-                    // 非源码
-                    const CloudComponentCodePath = path.join(__dirname, `./com/${CloudComponentName}CompiledCode.js`);
-                    fs.writeFileSync(path.join(__dirname, CloudComponentCodePath), runtime);
+                    resultRuntime = getImportComsCode(completeDeps) + resultRuntime.replace("function", "function RenderCom") + `
+                      export default applyPureReactInVue(function (props) {
+                        var inputs = ${JSON.stringify(inputs)};
+                        var outputs = ${JSON.stringify(outputs)};
 
-                    const resultRuntime = `
-                      import RenderCom from "${CloudComponentCodePath}";
-                      ${getImportComsCode(completeDeps)}
+                        var relInputs = {};
+                        var relOutputs = {};
+
+                        inputs.forEach(ipt => {
+                          var id = ipt.id;
+                          if (id in props) {
+                            var v = props[id];
+                            relInputs[id] = function(fn) {
+                              fn(v)
+                            };
+                          };
+                        })
+                        outputs.forEach(opt => {
+                          var id = opt.id;
+                          id = 'on' + id.replace(new RegExp(id[0]), id[0].toUpperCase());
+
+                          if (id in props) {
+                            var v = props[id];
+                            relOutputs[opt.id] = function(val) {
+                              v(val);
+                            }
+                          }
+                        })
+                        
+
+                        return React.createElement(RenderCom, {env: {
+                          renderCom: (json, opts) => {
+                            return new Promise((resolve) => {
+                              renderCom(json, opts, comDefs).then(resolve);
+                            })
+                          }
+                        },inputs: relInputs,outputs: relOutputs});
+                      });
                     `;
-
+  
                     fs.writeFileSync(CloudComponentPath, resultRuntime);
@@ -223,3 +276,3 @@ }
 
-            componentLoad(getCompleteDeps(deps, tagName, pathPrefix, "vue"), true).then(resolve);
+            componentLoad(getCompleteDeps(deps, tagName, pathPrefix, "js"), true).then(resolve);
           }
@@ -245,2 +298,6 @@ })
   }
+
+  if (deps.length) {
+    fs.writeFileSync(comsMapPath, JSON.stringify(globalImportComsMap));
+  }
   
@@ -264,2 +321,3 @@ return source;
 function getImportComsCode (deps) {
+  const map = {}
   let importComsCode = `
@@ -278,6 +336,10 @@ import renderCom from "${renderCom}";
 
+    if (map[CloudComponentName]) return
+
+    map[CloudComponentName] = true
+
     importComsCode = importComsCode + `
       import ${CloudComponentName} from "${CloudComponentPath}";
       comDefs["${namespace}-${version}"] = {
-        runtime: ${CloudComponentName}
+        runtime: ${CloudComponentName}.runtime
       };\n
@@ -296,14 +358,3 @@ `;
   ${importComsCode}
-  
-  export default applyPureReactInVue(function () {
-    return React.createElement(RenderCom, {env: {
-      renderCom: (json, opts) => {
-        return new Promise((resolve) => {
-          renderCom(json, opts, comDefs).then(resolve);
-        })
-      }
-    }});
-  });
-
   `;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

606027

increased by2343.85%

Dependency count

7

decreased by-12.5%

Number of package files

75

increased by435.71%

Lines of code

1357

increased by110.06%

Worsened metrics

Dev dependency count

8

increased by33.33%

Number of low quality alerts

55

increased by2650%

Number of low supply chain risk alerts

8

increased by166.67%

Number of medium supply chain risk alerts

7

increased by600%

Dependency changes

• + Added@mybricks/render-web@1.0.15-beta1(transitive)

• - Removedreact@^18.2.0

• - Removed@mybricks/comlib-core@0.0.51(transitive)

• - Removed@mybricks/render-web@1.3.34(transitive)

• Updated@mybricks/render-web@1.0.15-beta1

• Updated@vue/compiler-dom@^3.2.45