crownpeak-dxm-vuejs-sdk - npm Package Compare versions

Comparing version 3.0.0 to 3.1.0

classes/parsers/component.js

@@ -6,4 +6,6 @@ const fs = require("fs");
 const utils = require("crownpeak-dxm-sdk-core/lib/crownpeak/utils");
+const extensions = [".vue", ".js"];
 
 let _componentName = "";
+let _fileName = "";
 let _componentCache = {};
@@ -16,8 +18,9 @@
 const parse = (content, file) => {
+    _fileName = file;
     const {templates, scripts, styles} = getParts(file, content);
 
     let template = templates.join("\n");
-    const script = scripts.join("\n");
+    let script = scripts.join("\n");
 
-    const ast = babelParser.parse(script, {
+    let ast = babelParser.parse(script, {
         sourceType: "module"
@@ -43,4 +46,6 @@ });
                     && specifier.local && specifier.local.type === "Identifier") {
-                    //console.log(`Found import ${specifier.local.name}`);
-                    imports.push(specifier.local.name);
+                    const imp = {name: specifier.local.name, source: part.source.value};
+                    imp.isCmsComponent = isCmsComponentInternal(imp.name, imp);
+                    //console.log(`Found import ${imp.name}, ${imp.source}, ${imp.isCmsComponent}`);
+                    imports.push(imp);
                 }
@@ -84,2 +89,4 @@ }
     }
+    // Replacements from .cpscaffold.json file
+    content = utils.replaceMarkup(content);
     return trimSharedLeadingWhitespace(content);
@@ -204,7 +211,7 @@ };
     }
-    let importItems = imports.sort((a, b) => b.length - a.length);
+    let importItems = imports.filter(i => i.isCmsComponent).sort((a, b) => b.name.length - a.name.length);
     for (let i = 0, len = importItems.length; i < len; i++) {
-        //console.log(`Looking for ${importItems[i]}`);
+        //console.log(`Looking for ${importItems[i].name}`);
         for (let j = 0, lenJ = componentRegexs.length; j < lenJ; j++) {
-            let regex = new RegExp(componentRegexs[j].source.replace("%%name%%", importItems[i]));
+            let regex = new RegExp(componentRegexs[j].source.replace("%%name%%", importItems[i].name));
             let match = regex.exec(result);
@@ -214,6 +221,6 @@ let index = 0;
                 let suffix = ++index > 1 ? "_" + index : "";
-                let replacement = componentRegexs[j].replacement.replace("%%name%%", importItems[i] + suffix).replace("%%componentname%%", importItems[i]);
+                let replacement = componentRegexs[j].replacement.replace("%%name%%", importItems[i].name + suffix).replace("%%componentname%%", importItems[i].name);
                 //console.log(`Replacing [${match[0]}] with [${replacement}]`);
                 result = result.replace(regex, replacement);
-                addDependency(importItems[i], dependencies);
+                addDependency(importItems[i].name, dependencies);
                 match = regex.exec(result);
@@ -412,2 +419,19 @@ }
 
+const isCmsComponentInternal = (componentName, importDefinition) => {
+    //console.log(`Checking ${componentName} (${JSON.stringify(importDefinition)}) for being a CmsComponent`);
+    if (!importDefinition || !importDefinition.source) return false;
+    let source = path.resolve(path.dirname(_fileName), importDefinition.source);
+    if (fs.existsSync(source)) {
+        if (fs.lstatSync(source).isFile()) return isCmsComponent(source, fs.readFileSync(source));
+        // This is a directory, so look for a .vue file within
+        const vueFile = fs.readdirSync(source).find(f => f.length > 4 && f.substr(-4) === ".vue");
+        if (vueFile && fs.lstatSync(source + path.sep + vueFile).isFile()) return isCmsComponent(source + path.sep + vueFile, fs.readFileSync(source + path.sep + vueFile));
+    }
+    for (let i in extensions) {
+        const ext = extensions[i];
+        if (fs.existsSync(source + ext) && fs.lstatSync(source + ext).isFile()) return isCmsComponent(source + ext, fs.readFileSync(source + ext));
+    }
+    return false;
+}
+
 const isCmsComponent = (file, content) => {
@@ -414,0 +438,0 @@ const reComponent = new RegExp("extends\\s*:\\s*CmsComponent");

classes/parsers/page.js

@@ -6,2 +6,3 @@ const babelParser = require("@babel/parser");
 const utils = require("crownpeak-dxm-sdk-core/lib/crownpeak/utils");
+const component = require("./component");
 
@@ -47,3 +48,6 @@ let _pageName = "";
                     //console.log(`Found import ${specifier.local.name}, ${part.source.value}`);
-                    imports.push({name: specifier.local.name, source: part.source.value});
+                    const imp = {name: specifier.local.name, source: part.source.value};
+                    imp.isCmsComponent = isCmsComponentInternal(imp.name, imp);
+                    //console.log(`Found import ${imp.name}, ${imp.source}, ${imp.isCmsComponent}`);
+                    imports.push(imp);
                 }
@@ -104,2 +108,4 @@ }
     content = content.replace(/\s+v-if=(["']?)isLoaded\1/ig, "");
+    // Replacements from .cpscaffold.json file
+    content = utils.replaceMarkup(content);
     return trimSharedLeadingWhitespace(content);
@@ -133,2 +139,9 @@ };
 const processCmsPageTemplate = (content, name, template, components, imports) => {
+    const scaffoldPreRegexs = [
+        { source: "<!--\\s*cp-scaffold\\s*((?:.|\\r|\\n)*?)\\s*else\\s*-->\\s*((?:.|\\r|\\n)*?)\\s*<!--\\s*\\/cp-scaffold\\s*-->", replacement: "<!-- cp-pre-scaffold $1 /cp-pre-scaffold -->" },
+        { source: "<!--\\s*cp-scaffold\\s*((?:.|\\r|\\n)*?)\\s*\\/cp-scaffold\\s*-->", replacement: "$1"}
+    ];
+    const scaffoldPostRegexs = [
+        { source: "<!--\\s*cp-pre-scaffold\\s*((?:.|\\r|\\n)*?)\\s*\\/cp-pre-scaffold\\s*-->", replacement: "$1"}
+    ];
     const componentRegexs = [
@@ -138,2 +151,12 @@ { source: "<(%%name%%)([^>]*?)(>.*?<\\/\\1>|\\/>)", replacement: "{%%name%%}" }
     let result = template;
+    for (let j = 0, lenJ = scaffoldPreRegexs.length; j < lenJ; j++) {
+        let regex = new RegExp(scaffoldPreRegexs[j].source);
+        let match = regex.exec(result);
+        while (match) {
+            let replacement = scaffoldPreRegexs[j].replacement;
+            //console.log(`Replacing [${match[0]}] with [${replacement}]`);
+            result = result.replace(regex, replacement);
+            match = regex.exec(result);
+        }
+    }
     // Longest name first to avoid substring replacements
@@ -156,2 +179,12 @@ var dataItems = components.sort((a, b) => b.name.length - a.name.length);
     }
+    for (let j = 0, lenJ = scaffoldPostRegexs.length; j < lenJ; j++) {
+        let regex = new RegExp(scaffoldPostRegexs[j].source);
+        let match = regex.exec(result);
+        while (match) {
+            let replacement = scaffoldPostRegexs[j].replacement;
+            //console.log(`Replacing [${match[0]}] with [${replacement}]`);
+            result = result.replace(regex, replacement);
+            match = regex.exec(result);
+        }
+    }
     return result;
@@ -171,8 +204,10 @@ };
                 //console.log(`Found component property [${prop.key.name}]`);
-                importDefinition = imports.find(i => prop.key.name === i.name)
-                if (isDropZoneComponent(prop.key.name, importDefinition)) continue; // DropZones are processed by TemplateBuilder
-                results.push({
-                    name: prop.key.name,
-                    componentName: prop.key.name
-                });
+                importDefinition = imports.find(i => prop.key.name === i.name && i.isCmsComponent);
+                if (importDefinition) {
+                    if (isDropZoneComponent(prop.key.name, importDefinition)) continue; // DropZones are processed by TemplateBuilder
+                    results.push({
+                        name: prop.key.name,
+                        componentName: prop.key.name
+                    });
+                }
             }
@@ -184,2 +219,19 @@ }
 
+const isCmsComponentInternal = (componentName, importDefinition) => {
+    //console.log(`Checking ${componentName} (${JSON.stringify(importDefinition)}) for being a CmsComponent`);
+    if (!importDefinition || !importDefinition.source) return false;
+    let source = path.resolve(path.dirname(_fileName), importDefinition.source);
+    if (fs.existsSync(source)) {
+        if (fs.lstatSync(source).isFile()) return component.isCmsComponent(source, fs.readFileSync(source));
+        // This is a directory, so look for a .vue file within
+        const vueFile = fs.readdirSync(source).find(f => f.length > 4 && f.substr(-4) === ".vue");
+        if (vueFile && fs.lstatSync(source + path.sep + vueFile).isFile()) return component.isCmsComponent(source + path.sep + vueFile, fs.readFileSync(source + path.sep + vueFile));
+    }
+    for (let i in extensions) {
+        const ext = extensions[i];
+        if (fs.existsSync(source + ext) && fs.lstatSync(source + ext).isFile()) return component.isCmsComponent(source + ext, fs.readFileSync(source + ext));
+    }
+    return false;
+}
+
 const isDropZoneComponent = (componentName, importDefinition) => {
@@ -186,0 +238,0 @@ //console.log(`Checking ${componentName} (${JSON.stringify(importDefinition)}) for extending CmsDropZoneComponent`);

package.json

 {
   "name": "crownpeak-dxm-vuejs-sdk",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Crownpeak Digital Experience Management (DXM) Software Development Kit (SDK) for Vue.js has been constructed to assist the Single Page App developer in developing client-side applications that leverage DXM for content management purposes.",
@@ -10,3 +10,3 @@ "repository": "https://github.com/Crownpeak/DXM-VueJS-SDK",
     "@babel/parser": "^7.9.6",
-    "crownpeak-dxm-sdk-core": "^3.0.0",
+    "crownpeak-dxm-sdk-core": "^3.1.0",
     "dotenv": "^8.2.0",
@@ -13,0 +13,0 @@ "vue": "^2.6.11",

README.md

@@ -55,2 +55,3 @@ <a href="https://www.crownpeak.com" target="_blank">![Crownpeak Logo](https://github.com/Crownpeak/DXM-VueJS-SDK/raw/master/images/crownpeak-logo.png?raw=true "Crownpeak Logo")</a>
 | 2.4.0         | 2020OCT09     | Improved uploading and relinking, new page and component creation settings, new --only option. Bug fixes. |
-| 3.0.0         | 2020NOV06     | Change to asynchronous data loading, drag and drop zone governance, multi-file component support. Bug fixes. |
+| 3.0.0         | 2020NOV06     | Change to asynchronous data loading, drag and drop zone governance, multi-file component support. Bug fixes. |
+| 3.1.0         | 2021JAN04     | Add cp-scaffold for pages, ignore non-Crownpeak components, string replacements via .cpscaffold.json. |

No alert changes

Improved metrics

Total package byte prevSize

68160

increased by7.22%

Lines of code

1140

increased by6.94%

Number of lines in readme file

56

increased by1.82%

Dependency changes

• Updatedcrownpeak-dxm-sdk-core@^3.1.0