test: add #21 animate case

Author: sonofmagic

packages/core/src/env.ts

@@ -0,0 +1,2 @@
+export const isProd = () => process.env.NODE_ENV === 'production'
+export const isDev = () => process.env.NODE_ENV === 'development'

packages/core/src/js/index.ts

@@ -3,6 +3,7 @@ import * as t from '@babel/types'
 import { transformSync, type BabelFileResult, type NodePath } from '@babel/core'
 import type { IJsHandlerOptions } from '../types'
 import { makeRegex, splitCode } from '../shared'
+import { isProd } from '../env'
 
 export function handleValue(str: string, node: StringLiteral | TemplateElement, options: IJsHandlerOptions) {
   const { runtimeSet: set, classGenerator: clsGen, splitQuote = true } = options
@@ -66,7 +67,7 @@ export function jsHandler(rawSource: string, options: IJsHandlerOptions) {
         }
       }
     ],
-    minified: true,
+    minified: options.minified ?? isProd(),
     sourceMaps: false,
     configFile: false
   })

packages/core/src/types.ts

@@ -24,6 +24,7 @@ export interface IHtmlHandlerOptions extends IHandlerOptions {}
 
 export interface IJsHandlerOptions extends IHandlerOptions {
   splitQuote?: boolean
+  minified?: boolean
 }
 
 export interface ICssHandlerOptions extends IHandlerOptions {

packages/core/test/__snapshots__/js.test.ts.snap

@@ -1,5 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`js handler comment-ignore case 1`] = `
+"const clipPath = [\`circle()\`];
+document.documentElement.animate({
+  clipPath
+}, {
+  duration: 500,
+  easing: "tw-a",
+  pseudoElement: '::view-transition-new(root)'
+});
+document.documentElement.animate({
+  clipPath
+}, {
+  duration: 500,
+  easing: /* tw-mangle ignore */'ease-out',
+  pseudoElement: '::view-transition-new(root)'
+});"
+`;
+
 exports[`js handler common StringLiteral 1`] = `"element.innerHTML = "<div class=\\"tw-a tw-b\\">count is counter</div>";"`;
 
 exports[`js handler common StringLiteral with splitQuote false 1`] = `"element.innerHTML = '<div class="dark:bg-zinc-800/30 lg:dark:bg-zinc-800/30">count is counter</div>';"`;
@@ -17,6 +35,10 @@ exports[`js handler eval script case 1`] = `
 });"
 `;
 
+exports[`js handler minified js true 1`] = `"const clipPath=[\`circle()\`];document.documentElement.animate({clipPath},{duration:500,easing:"tw-a",pseudoElement:"::view-transition-new(root)"});document.documentElement.animate({clipPath},{duration:500,easing:/* tw-mangle ignore */"ease-out",pseudoElement:"::view-transition-new(root)"});"`;
+
+exports[`js handler minified js with NODE_ENV 1`] = `"const clipPath=[\`circle()\`];document.documentElement.animate({clipPath},{duration:500,easing:"tw-a",pseudoElement:"::view-transition-new(root)"});document.documentElement.animate({clipPath},{duration:500,easing:/* tw-mangle ignore */"ease-out",pseudoElement:"::view-transition-new(root)"});"`;
+
 exports[`js handler nextjs server side mangle 1`] = `
 ""use strict";
 

packages/core/test/fixtures/comment-ignore.js

@@ -0,0 +1,23 @@
+const clipPath = [`circle()`]
+
+document.documentElement.animate(
+  {
+    clipPath
+  },
+  {
+    duration: 500,
+    easing: 'ease-out',
+    pseudoElement: '::view-transition-new(root)'
+  }
+)
+
+document.documentElement.animate(
+  {
+    clipPath
+  },
+  {
+    duration: 500,
+    easing: /* tw-mangle ignore */ 'ease-out',
+    pseudoElement: '::view-transition-new(root)'
+  }
+)

packages/core/test/js.test.ts

@@ -114,4 +114,39 @@ describe('js handler', () => {
     }).code
     expect(code).toMatchSnapshot()
   })
+
+  it('comment-ignore case', () => {
+    const testCase = getTestCase('comment-ignore.js')
+    const runtimeSet = new Set<string>()
+    runtimeSet.add('ease-out')
+    const code = jsHandler(testCase, {
+      classGenerator,
+      runtimeSet
+    }).code
+    expect(code).toMatchSnapshot()
+  })
+
+  it('minified js true', () => {
+    const testCase = getTestCase('comment-ignore.js')
+    const runtimeSet = new Set<string>()
+    runtimeSet.add('ease-out')
+    const code = jsHandler(testCase, {
+      classGenerator,
+      runtimeSet,
+      minified: true
+    }).code
+    expect(code).toMatchSnapshot()
+  })
+
+  it('minified js with NODE_ENV', () => {
+    process.env.NODE_ENV = 'production'
+    const testCase = getTestCase('comment-ignore.js')
+    const runtimeSet = new Set<string>()
+    runtimeSet.add('ease-out')
+    const code = jsHandler(testCase, {
+      classGenerator,
+      runtimeSet
+    }).code
+    expect(code).toMatchSnapshot()
+  })
 })