Implement bubbleSort() and propertySort()

packages/autocomplete-css/package.json

@@ -17,7 +17,9 @@
   },
   "devDependencies": {
     "@webref/css": "^6.3.4",
-    "content": "github:mdn/content",
-    "request": "^2.53.0"
+    "content": "github:mdn/content"
+  },
+  "dependencies": {
+    "superagent": "^8.0.9"
   }
 }

packages/autocomplete-css/update/update.js

@@ -87,6 +87,7 @@
 
 const css = require("@webref/css");
 const fs = require("fs");
+const superagent = require("superagent");
 const CSSParser = require("./cssValueDefinitionSyntaxExtractor.js");
 const manualPropertyDesc = require("./manual-property-desc.json");
 
@@ -103,8 +104,15 @@ async function update(params) {
     pseudoSelectors: pseudoSelectors
   };
 
+  // Now lets sort the properties according to length
+  console.log("BubbleSort...");
+  completions.properties = bubbleSort(completions.properties);
+  // Then lets sort properties by popularity
+  console.log("PopularSort...");
+  completions.properties = await popularSort(completions.properties);
+
   // Now to write out our updated file
-  fs.writeFileSync("../completions.json", JSON.stringify(completions, null, 2));
+  fs.writeFileSync("./completions.json", JSON.stringify(completions, null, 2));
 
   // Now to determine how many properties have empty descriptions.
 
@@ -134,6 +142,65 @@ async function update(params) {
   };
 }
 
+function bubbleSort(obj) {
+  let keys = Object.keys(obj);
+
+  keys.sort((a, b) => {
+    if (a.length > b.length) {
+      return 1;
+    } else if (a.length < b.length) {
+      return -1;
+    } else {
+      return 0;
+    }
+  });
+
+  let newObj = {};
+
+  // Now rebuild the object according to our new keys
+  for (i in keys) {
+    newObj[keys[i]] = obj[keys[i]];
+  }
+
+  return newObj;
+}
+
+async function popularSort(obj) {
+  try {
+    const res = await superagent.get("https://chromestatus.com/data/csspopularity");
+    if (res.status !== 200) {
+      console.error(res);
+      process.exit(1);
+    }
+
+    let newObj = {};
+
+    for (prop in res.body) {
+      let property = res.body[prop].property_name;
+
+      if (typeof obj[property] === "object") {
+        newObj[property] = obj[property];
+      }
+    }
+
+    if (Object.keys(obj).length === Object.keys(newObj).length) {
+      return newObj;
+    }
+
+    for (prop in obj) {
+      if (typeof newObj[prop] !== "object") {
+        newObj[prop] = obj[prop];
+      }
+    }
+
+    return newObj;
+
+  } catch(err) {
+    console.error(err);
+    process.exit(1);
+  }
+}
+
 async function buildProperties(css) {
   // This function will take a CSS object of all values from @webref/css
   // and will gather descriptions from mdn/content for these properties.
@@ -189,7 +256,7 @@ async function getDescriptionOfProp(name) {
   // specs and may not be worth mentioning standalone.
   let file;
   let filePath = [ "css", "svg/attribute", "svg/element" ].map(path =>
-    `../node_modules/content/files/en-us/web/${path}/${name}/index.md`
+    `./node_modules/content/files/en-us/web/${path}/${name}/index.md`
   ).find(f => fs.existsSync(f));
 
   if (filePath) {
@@ -327,7 +394,7 @@ async function getTagsHTML() {
 
   let tags = [];
 
-  let files = fs.readdirSync("../node_modules/content/files/en-us/web/html/element");
+  let files = fs.readdirSync("./node_modules/content/files/en-us/web/html/element");
 
   files.forEach(file => {
     if (file != "index.md") {