Refactor hoisting declaration function

Author: winston0410

src/hoister.js

@@ -1,71 +1,90 @@
-import path from "path/posix";
 import { getProxiedObject } from "./helper.js";
 
 const foundInLayout = (layoutClassList, className) => {
-  for (const key in layoutClassList) {
-    for (const layoutClassName in layoutClassList[key]) {
-      if (layoutClassName === className) {
+  for (const original in layoutClassList) {
+    for (const minified in layoutClassList[original]) {
+      if (minified === className) {
         return true;
       }
     }
   }
   return false;
 };
 
-export const hoistClass = (classCache, hoistedClassCache) => {
-  const layoutFilename = "__layout.svelte";
+const removeComponentDecl = (layoutFilename, base, declarationCache) => {
+  if (base === layoutFilename) {
+    return declarationCache;
+  }
+
+  return {};
+};
 
-  //  no need for in loop here for filename?
-  for (const filename in classCache) {
-    const { dir, base } = path.parse(filename);
+const hasReachedSrc = (path) => {
+  const dirList = path.split("/");
+  return dirList[dirList.length - 1] === "src";
+};
 
-    const currentComponentClassList = classCache[filename];
+const goPreviousDir = (path) => {
+  return path.substring(0, path.lastIndexOf("/"));
+};
 
-    if (base === layoutFilename) {
-      hoistedClassCache[dir][base] = currentComponentClassList;
-      continue;
+const findClosestLayout = (dir, layoutFilename, classCache) => {
+  if (classCache[dir][layoutFilename]) {
+    return classCache[dir][layoutFilename];
+  } else {
+    if (hasReachedSrc(dir)) {
+      return false;
     }
+    return findClosestLayout(goPreviousDir(dir), layoutFilename, classCache);
+  }
+};
 
-    const layoutClassList = hoistedClassCache[dir][layoutFilename];
+export const hoistDeclaration = (
+  opts,
+  { dir: curDir, base: curBase },
+  classCache,
+  declarationCache
+) => {
+  if (!opts.lazyLoad) {
+    return removeComponentDecl(opts.layoutFilename, curBase, declarationCache);
+  }
 
-    if (!layoutClassList) {
-      hoistedClassCache[dir][base] = currentComponentClassList;
-      continue;
-    }
+  if (curBase === opts.layoutFilename) {
+    return declarationCache;
+  }
+
+  const currentComponentDecl = classCache[curDir][curBase];
+  const layoutDecl = findClosestLayout(curDir, opts.layoutFilename, classCache);
+
+  //  hoisting won't work without a __layout.svelte
+  if (!layoutDecl) {
+    return declarationCache;
+  }
 
-    const filteredClassList = getProxiedObject();
+  const list = [];
 
-    for (const original in currentComponentClassList) {
-      for (const minified in currentComponentClassList[original]) {
-        if (!foundInLayout(layoutClassList, minified)) {
-          filteredClassList[original][minified] = true;
-        }
+  for (const original in currentComponentDecl) {
+    for (const minified in currentComponentDecl[original]) {
+      if (!foundInLayout(layoutDecl, minified)) {
+        list.push(minified);
       }
     }
-
-    hoistedClassCache[dir][base] = filteredClassList;
   }
+
+  return filterDeclaration(list, declarationCache);
 };
 
-export const hoistDeclaration = (
-  filename,
-  hoistedClassCache,
-  declarationCache
-) => {
-  const { dir, base } = path.parse(filename);
-  const hoistedDeclarationCache = getProxiedObject();
-  const currentComponentCache = hoistedClassCache[dir][base];
-  //  This is hell
-  for (const original in currentComponentCache) {
-    for (const minified of Object.keys(currentComponentCache[original])) {
-      for (const mediaQuery in declarationCache) {
-        for (const decl in declarationCache[mediaQuery]) {
-          if (minified === declarationCache[mediaQuery][decl]) {
-            hoistedDeclarationCache[mediaQuery][decl] = minified;
-          }
-        }
+const filterDeclaration = (list, declarationCache) => {
+  const result = getProxiedObject();
+
+  for (const mediaQuery in declarationCache) {
+    for (const originalDecl in declarationCache[mediaQuery]) {
+      const token = declarationCache[mediaQuery][originalDecl];
+      if (list.includes(token)) {
+        result[mediaQuery][originalDecl] = token;
       }
     }
   }
-  return hoistedDeclarationCache;
+
+  return result;
 };

src/index.js

@@ -2,16 +2,17 @@ import { parse } from "svelte/compiler";
 import createTokenizer from "./tokenizer.js";
 import createTransformer from "./transformer.js";
 import { getProxiedObject } from "./helper.js";
-import { hoistDeclaration, hoistClass } from "./hoister.js";
+import { hoistDeclaration } from "./hoister.js";
+import path from "path";
 
 //  Keep state outside default function as it will be called multiple times
 const classCache = getProxiedObject();
-const hoistedClassCache = getProxiedObject();
 const declarationCache = getProxiedObject();
 const tokernizer = createTokenizer(classCache, declarationCache);
 
 const defaultOpts = {
-    lazyLoad: true
+    lazyLoad: true,
+    layoutFilename: "__layout.svelte"
 }
 
 export default function (opts = {}) {
@@ -20,21 +21,17 @@ export default function (opts = {}) {
     markup: function ({ content, filename }) {
       //  Ignore all default code
       if (!filename.includes(".svelte-kit")) {
+        const parsedPath = path.parse(filename)
         const ast = parse(content, { filename });
-        tokernizer.generateToken(ast.css, filename);
+        tokernizer.generateToken(ast.css, parsedPath);
 
-        const transformer = createTransformer(content, filename, opts);
+        const transformer = createTransformer(content, parsedPath);
+
+        const hoisted = hoistDeclaration(opts, parsedPath, classCache, declarationCache)
 
-        hoistClass(classCache, hoistedClassCache);
-        const hoistedDeclarationCache = hoistDeclaration(
-          filename,
-          hoistedClassCache,
-          declarationCache
-        );
-        
         const result = transformer
           .transformHtml(ast.html, classCache)
-          .transformCss(ast.css, hoistedDeclarationCache)
+          .transformCss(ast.css, hoisted)
           .toString();
 
         return {

src/tokenizer.js

@@ -43,7 +43,7 @@ const createTokenizer = (classCache, declarationCache) => {
   const next = joli("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_");
 
   return {
-    generateToken(cssAst, filename) {
+    generateToken(cssAst, {dir, base}) {
       const tempCache = getProxiedObject();
 
       walk(cssAst, {
@@ -83,11 +83,10 @@ const createTokenizer = (classCache, declarationCache) => {
           }
         },
       });
-
+      
       //  hydrate the classCache once only here
-      classCache[filename] = {};
-      Object.assign(classCache[filename], tempCache);
-      //  cannot dedup classCache directly, as it is used to reference class in HTML
+      classCache[dir][base] = {};
+      Object.assign(classCache[dir][base], tempCache);
     },
   };
 };

src/transformer.js

@@ -2,7 +2,7 @@ import MagicString from "magic-string";
 import { walk } from "svelte/compiler";
 import { assembleRules } from "./helper.js";
 
-export default function (code, filename, opts) {
+export default function (code, {dir, base}) {
   const changeable = new MagicString(code);
 
   return {
@@ -55,7 +55,7 @@ export default function (code, filename, opts) {
           for (const value of attrValue.raw.split(" ")) {
             let minifiedClass = "";
             let index = 0;
-            for (const token in cache[filename][value]) {
+            for (const token in cache[dir][base][value]) {
               minifiedClass += index === 0 ? token : " " + token;
               index++;
             }