fix(transformer-applet): template literals

unocss-applet · Sep 7, 2022 · 1c4809d · 1c4809d
1 parent 4df8f03
commit 1c4809d
Show file tree

Hide file tree

Showing 12 changed files with 975 additions and 1,237 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,7 +6,7 @@
     "**/CVS": true,
     "**/.DS_Store": true,
     "**/Thumbs.db": true,
-    "**/node_modules": true
+    "**/node_modules": false
   },
   "unocss.root": "./playground"
 }
diff --git a/README.md b/README.md
@@ -56,8 +56,10 @@ else {
 export default defineConfig({
   presets: [
     presetIcons(),
-    // you can add `presetAttributify()` here to enable unocss attributify mode prompt
-    // although preset is not working for applet
+    /**
+     * you can add `presetAttributify()` here to enable unocss attributify mode prompt
+     * although preset is not working for applet
+     */
     // presetAttributify(),
     ...presets,
   ],

diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "rimraf": "^3.0.2",
     "typescript": "^4.7.4",
     "unbuild": "^0.8.8",
-    "unocss": "^0.45.14",
+    "unocss": "^0.45.18",
     "unocss-applet": "workspace:*",
     "vite": "^2.9.15",
     "vitest": "^0.21.1"

diff --git a/packages/preset-applet/package.json b/packages/preset-applet/package.json
@@ -54,8 +54,8 @@
     "stub": "unbuild --stub"
   },
   "dependencies": {
-    "@unocss/core": "^0.45.14",
-    "@unocss/preset-mini": "^0.45.14",
-    "@unocss/preset-wind": "^0.45.14"
+    "@unocss/core": "^0.45.18",
+    "@unocss/preset-mini": "^0.45.18",
+    "@unocss/preset-wind": "^0.45.18"
   }
 }
diff --git a/packages/preset-rem-to-rpx/package.json b/packages/preset-rem-to-rpx/package.json
@@ -37,6 +37,6 @@
     "stub": "unbuild --stub"
   },
   "dependencies": {
-    "@unocss/core": "^0.45.14"
+    "@unocss/core": "^0.45.18"
   }
 }
diff --git a/packages/transformer-applet/package.json b/packages/transformer-applet/package.json
@@ -35,7 +35,7 @@
     "stub": "unbuild --stub"
   },
   "dependencies": {
-    "@unocss/core": "^0.45.14"
+    "@unocss/core": "^0.45.18"
   },
   "devDependencies": {
     "magic-string": "^0.26.2"

diff --git a/packages/transformer-applet/src/index.ts b/packages/transformer-applet/src/index.ts
@@ -9,7 +9,7 @@ const charReg = /[.:%!#()[\/\],]/
 const elementRE = /<\w(?=.*>)[\w:\.$-]*\s(((".*?>?.*?")|.*?)*?)\/?>/gs
 const valuedAttributeRE = /([?]|(?!\d|-{2}|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:!%-]+)(?:={?(["'])([^\2]*?)\2}?)?/g
 const stringRE = /'(.*?)'|/g
-// TODO: support (\`(.*?)\`)
+const templateLiteralsRE = /`([\s\S]*?)`/g
 
 export default function transformerApplet(options: TransformerAppletOptions = {}): SourceCodeTransformer {
   const ignorePrefix = options.ignorePrefix || 'applet-ignore:'
@@ -79,6 +79,19 @@ export default function transformerApplet(options: TransformerAppletOptions = {}
           }
         }
       }
+
+      // process template literals, only effective with ``
+      code = new MagicString(code.toString())
+      const templateLiteralsMatches = code.original.matchAll(templateLiteralsRE)
+      for (const match of templateLiteralsMatches) {
+        const start = match.index!
+        const content = match[1]
+        // split content
+        if (charReg.test(content)) {
+          const replacements = await compileApplet(content, ctx, options)
+          code.overwrite(start, start + match[0].length, `\`${replacements.join(' ')}\``)
+        }
+      }
       s.overwrite(0, s.original.length, code.toString())
     },
   }

diff --git a/packages/transformer-attributify/package.json b/packages/transformer-attributify/package.json
@@ -35,7 +35,7 @@
     "stub": "unbuild --stub"
   },
   "dependencies": {
-    "@unocss/core": "^0.45.14"
+    "@unocss/core": "^0.45.18"
   },
   "devDependencies": {
     "magic-string": "^0.26.2"

diff --git a/packages/unocss-applet/README.md b/packages/unocss-applet/README.md
@@ -56,8 +56,10 @@ else {
 export default defineConfig({
   presets: [
     presetIcons(),
-    // you can add `presetAttributify()` here to enable unocss attributify mode prompt
-    // although preset is not working for applet
+    /**
+     * you can add `presetAttributify()` here to enable unocss attributify mode prompt
+     * although preset is not working for applet
+     */
     // presetAttributify(),
     ...presets,
   ],

diff --git a/playground/src/pages/index/index.vue b/playground/src/pages/index/index.vue
@@ -9,16 +9,16 @@ const bool = ref<boolean>()
 
 <template>
   <div class="text-center aaa" p="4">
-    <div text="4xl" class="rotate-180 i-carbon-campsite" :class="bg" />
+    <div text="4xl" class="rotate-180 i-carbon-campsite" :class="bg" @click="bool = !bool" />
     <div class="border bg-blue-200 font-(light mono) ">
       <div class="hover:(!bg-gray-600 text-red font-bold)" text="#fff">
         {{ 'applet-ignore: hover:(!bg-gray-600 text-red font-bold)' }}
       </div>
     </div>
-    <div :class="`p-2.5 ${bool ? 'p-0.5' : ''}`" m-2 :hover-class="['!bg-green']">
+    <div b="~" :class="`p-2.5 ${bool ? '!p-0.5' : ''}`" m-2 :hover-class="['!bg-green']">
       class="hover:bg-green"
     </div>
-    <div flex="~ col gap-1" class="p-1" items-center :class="bool ? 'text-yellow-500 px-2.5' : ''">
+    <div flex="~ col gap-1" class="p-1" items-center :class="bool ? 'text-yellow-500 underline' : ''">
       <div i-carbon-campsite inline-block color="blue" text="xl !red" />
       <div bg="green-(!200 800)">
         {{ `index${index + 1}` }}{{ `index` }}