testing progress

Author: Lutymane

src/index.ts

@@ -4,6 +4,7 @@ import { devNameGeneratorContext, prodNameGeneratorContext } from "./nameGenerat
 
 import { parse as sfcParse } from "@vue/compiler-sfc";
 import { transformPug } from "./transformPug.js";
+import { transformHtml } from "./transformHtml.js";
 
 // import type { Options as TPugOptions } from "pug";
 
@@ -68,25 +69,39 @@ function plugin({
         } = sfcParse(code);
 
         //skip sfc if there's no module styles
-        // @todo let styleModule = s.module;
+        // @todo let styleModule: string | boolean = s.module;
         if (!styles.find(s => s.module)) {
           return;
         }
 
         let localNameGenerator = (name: string) => nameGenerator(name, id, "");
 
+        // undefined means html as well
+        template.lang ??= "html";
+
+        let transformedTemplate;
+
         if (template.lang === "pug") {
-          return transformPug(template.content, pugLocals, {
+          transformedTemplate = transformPug(template.content, pugLocals, {
+            preservePrefix,
+            localNameGenerator,
+            module: scriptTransform ? false : "$style",
+          });
+        } else if (template.lang === "html") {
+          transformedTemplate = transformHtml(template.content, {
             preservePrefix,
             localNameGenerator,
             module: scriptTransform ? false : "$style",
           });
+        } else {
+          console.error(`Unsupported template language "${template.lang}"! Skipped`);
+          return;
         }
 
-        return code;
+        return code //
+          .replace('lang="pug"', "") // pug transform returns html
+          .replace(template.content, transformedTemplate);
       }
-
-      return null;
     },
   };
   // @todo satisfies Plugin;

src/transformHtml.ts

@@ -1,5 +1,12 @@
 import type { TLocalTransformOptions } from "./types";
 
+import { transformJsValue } from "./transformJsValue.js";
+
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
+
+// parse5 supports require
+
 export const transformHtml = (
   source: string,
   { preservePrefix, localNameGenerator, module }: TLocalTransformOptions

src/transformPug.ts

@@ -2,8 +2,9 @@ import type { Options as TPugOptions } from "pug";
 
 import type { TLocalTransformOptions } from "./types";
 
+import { transformJsValue } from "./transformJsValue.js";
+
 import { createRequire } from "module";
-import { transformJsValue } from "./transformJsValue";
 const require = createRequire(import.meta.url);
 
 let pug: {
@@ -17,7 +18,7 @@ let pug: {
 const resolvePug = () => {
   pug = {
     lex: require("pug-lexer"),
-    parse: require("pug-parse"),
+    parse: require("pug-parser"),
     walk: require("pug-walk"),
     generate: require("pug-code-gen"),
     wrap: require("pug-runtime/wrap"),
@@ -46,7 +47,7 @@ export const transformPug = (
 
   let ast = parse(lex(source));
 
-  ast = walk(ast, node => {
+  walk(ast, node => {
     // if node has attributes
     if (node.attrs?.length) {
       // mutate class and id attributes
@@ -83,9 +84,12 @@ export const transformPug = (
 
               value = transformJsValue(value, { preservePrefix, localNameGenerator, module });
 
-              //   attr.val = "`" + value + "`";
+              attr.val = "`" + value.replace(/`/g, "'") + "`";
               attr.val = value;
-              //   attr.mustEscape = false;
+
+              console.log(value);
+
+              attr.mustEscape = false;
             }
             break;
         }

test/index.js

@@ -1,23 +1,13 @@
-import generateCode from "pug-code-gen";
-import wrap from "pug-runtime/wrap.js";
-
 import { readFileSync, writeFileSync } from "fs";
 
-import { transform } from "../dist/transform3.js";
+import pluginFactory from "../dist/index.js";
 
-let preservePrefix = "--";
 let nameGenerator = name => "TEST__" + name;
 
-let testVue = readFileSync("./test/test.vue").toString();
-
-let ast = transform(testVue, { preservePrefix, nameGenerator });
+const plugin = pluginFactory({ nameGenerator });
 
-writeFileSync("./test/ast.json", JSON.stringify(ast, null, 4));
-
-let funcStr = generateCode(ast, {});
-
-let template = wrap(funcStr);
+let testVue = readFileSync("./test/test.vue").toString();
 
-let htmlTemplateCode = template({});
+let result = plugin.transform(testVue, "test.vue");
 
-writeFileSync("./test/result.html", htmlTemplateCode);
+writeFileSync("./test/result.vue", result);

test/result.vue

@@ -0,0 +1,29 @@
+<template ><div class="TEST__class0"> </div><div class="TEST__class0 TEST__class2"></div><div class="TEST__class3" id="TEST__id0">test</div><div :class='[{},{},"TEST__c","TEST__d",null]'></div><span :class="{}"></span><div></div><div :class="class4"></div><div :class="class5"></div><div :class="TEST__class7"></div><div :class="TEST__class11"></div><div>@todo This won't be processed</div><div class="escaped0"> </div><div id="escaped1"> </div><div :class="someRawVar"></div><div :id="someRawVar2"></div></template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    props: {
+
+    },
+    async setup(props, { emit }) {
+        alert('test!')
+        return {}
+    }
+})
+</script>
+
+<style lang="less" module="a">
+.class0 {
+    display: flex;
+}
+
+.class2 {
+    display: grid;
+}
+
+.class1 {
+    display: ruby;
+}
+</style>

test/test.vue

@@ -9,7 +9,7 @@ span(:class=`{
     'string-const':toggle2,
     "another-one" :toggle3
 }`)
-div(:class="class")
+div(:class="varClass")
 div(:class="'class4'")
 div(:class='"class5"')
 div(:class="v ? 'class6' : `class7`")